是否可以在不使用文件路径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="" />