是否可以在不使用文件路径 src 的情况下插入图像？

Question

假设我有一个图像存储为一个变量，来自一个表单，格式为 var someImage = document.getElementById("input1").files[0]。如何在不使用文件路径的情况下将保存到变量的图像插入 HTML 文档？

Answer 1

是，参见 FileReader.readAsDataURL()：将文件读取为数据 URI。

document.getElementById("input1").onchange = function(e) {
  var someImage = e.target.files[0]
  var reader = new FileReader();
  var img = document.getElementById('preview');
  reader.onload=function(){
    img.src = reader.result
  }
  reader.readAsDataURL(someImage)
}

<input type="file" id="input1" accept="image/*" />
<img id="preview" src="" />