多个（单个）文件字段上的 FileReader 缩略图预览

Question

将 javascript 应用于多个（单个）文件上传字段的最佳方式是什么，目前这在单个字段上效果很好，但针对的是 ID，我假设有一种更优雅的方式来编写 javascript，而不是为每个 ID 重复?:

function PreviewImage() {
  var oFReader = new FileReader();
  oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

  oFReader.onload = function(oFREvent) {
    document.getElementById("uploadPreview").src = oFREvent.target.result;
    document.getElementById('uploadPreview-container').style.display = 'block';
  };
};

function ResetImage() {
  document.getElementById('uploadPreview-container').style.display = 'none';
  document.getElementById('uploadImage').value = '';
};

#uploadPreview {
  width: 100px;
}

#uploadPreview-container {
  display: none;
  position: relative;
  width: 100px;
}

#uploadReset {
  position: absolute;
  top: 0;
  right: 0;
}

<div id="uploadPreview-container">
  <img id="uploadPreview" />
  <div id="uploadReset"><a href="javascript:void(0)" onclick="ResetImage()" title="Reset Image Upload">RESET</a></div>
</div>
<div><input id="uploadImage" type="file" name="myPhoto" data-max-size="248" onChange="PreviewImage();" /></div>

Answer 1

你说得对，你必须使用类名而不是 id，因为你不知道要添加多少图像，所以你必须动态创建 img 元素。

1. 添加multiple 属性，允许用户在单个文件输入中上传多个图像。
2. 循环遍历文件并为每个文件附加图像预览。

function PreviewImage() {
  Array.from(document.getElementById("uploadImage").files).forEach(file=>{
    var oFReader = new FileReader();
    oFReader.readAsDataURL(file);
    oFReader.onload = function(oFREvent) {
      var img = new Image();
      img.src = oFREvent.target.result;
      img.className = "uploadPreview";
      document.getElementById("preview_div").appendChild(img);
      document.getElementById('uploadPreview-container').style.display = 'block';
    };
  });
};

function ResetImage() {
  document.getElementById('uploadPreview-container').style.display = 'none';
  document.getElementById('uploadImage').value = '';
};

.uploadPreview {
  width: 100px;
}

#uploadPreview-container {
  display: none;
  position: relative;
  width: 100px;
}

#uploadReset {
  position: absolute;
  top: 0;
  right: 0;
}

<div id="uploadPreview-container">
  <div id=preview_div></div>
  <div id="uploadReset"><a href="javascript:void(0)" onclick="ResetImage()" title="Reset Image Upload">RESET</a></div>
</div>
<div><input id="uploadImage" type="file" name="myPhoto" data-max-size="248" onChange="PreviewImage();" multiple /></div>