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

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

Html use file from user and set as background?

html

javascript

forms

camera

background-image