Html使用用户的文件并设置为背景

Question

我有这段代码用于选择HTML中的文件，我希望允许用户选择一个文件，然后能够将其设置为背景。以下是选择文件的代码

<form id="form1" name="form1" enctype="multipart/form-data">
<input type="file" id="file1"  name="file1" accept="image/*" capture="camera">
<br>
<input type="button" value="Save" onclick="sendFile();" />
</form>

或者有没有一种方法可以用HTML访问用户的相机？基本上，我希望用户能够选择图像或拍摄图像，然后将图像设置为背景。

Answer 1

是的，我们可以利用浏览器的FileReader API读取文件并在客户端使用该文件下面是使用FileReader API作为用例的典型示例：

function sendFile() {
// IN YOUR ACTUAL CODE REPLACE DEMODIV WITH
// document.body or the body of your html
const demoDiv = document.querySelector('#demo');
const file = document.querySelector('#file1').files[0];
const reader = new FileReader();
reader.addEventListener("load", function () {
// setting image file convert to base64 string as demoDiv's background
demoDiv.style.backgroundImage = `url(${reader.result})`;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}

#demo {
width: 100%;
height: 400px;
}

<form id="form1" name="form1" enctype="multipart/form-data">
<input type="file" id="file1"  name="file1" accept="image/*" capture="camera">
<br>
<input type="button" value="Save" onclick="sendFile();" />
</form>
<div id="demo"></div>

参考：reader.readFileAsDataUrl