选择多个图像后显示图像答案

【问题标题】：display images after selecting multiple images选择多个图像后显示图像
【发布时间】：2020-11-13 20:40:39
【问题描述】：

上传多张图片后，我在html中添加了图片标签，然后想显示选定的图像，但我不能很好地显示它们。我该如何解决这个问题？

<input type="file" id="inpFile" name="multi_image" multiple>
<button id="btnUpload">Upload File </button>
<div id="selectedFiles"></div>


<script type="text/javascript">
  const inpFile = document.getElementById("inpFile");
  const btnUpload = document.getElementById("btnUpload");
  var display = document.querySelector("#selectedFiles");

  btnUpload.addEventListener("click", function() {
    const formData = new FormData;

    for (const file of inpFile.files){
      formData.append("multi_image", file);
      img_tag = "<img src='images/"+ file.name + "'>"
      console.log(img_tag);
      display.innerHTML +=  img_tag+ "<br/>";
    }

    fetch('/project/create', {
        method: 'POST',
        body: formData
    })
    .then(response => {
      console.log(response);
    })
  })
</script>

【问题讨论】：

这能回答你的问题吗？ How to preview multiple images before upload?
因此，当您通过文件输入添加图像时，它可以访问 base64，然后您可以在 src 属性中使用它。我想你想用FileReader.readAsDataURL()

标签： javascript image multer

【解决方案1】：

这将有助于解决您的问题，它完全基于JS，不使用Jquery。

function previewImages() {

  var preview = document.querySelector('#preview');
  
  if (this.files) {
    [].forEach.call(this.files, readAndPreview);
  }

  function readAndPreview(file) {

    // File type validator based on the extension 
    if (!/\.(jpe?g|png|gif)$/i.test(file.name)) {
      return alert(file.name + " is not an image");
    }
    
    var reader = new FileReader();
    
    reader.addEventListener("load", function() {
      var image = new Image();
      image.height = 100;
      image.title = file.name;
      image.src = this.result;
      preview.appendChild(image);
    });
    
    reader.readAsDataURL(file);
    
  }

}

document.querySelector('#img-selector').addEventListener("change", previewImages);

<input id="img-selector" type="file" multiple>
<div id="preview"></div>

【讨论】：

【解决方案2】：

只需将img_tag 更改为 img_tag = "<img src='"+ URL.createObjectURL(file) + "'>"

由于安全风险，JS 不会直接在 inpFile 数组中提供我们操作系统系统（Windows/Mac）的路径。

【讨论】：