我可以一个接一个地在输入文件上插入图像吗？

Question

当我逐个插入图像时，“输入文件”只读取一张图片。

但是，当我多次插入图像时，结果的读取量与用户输入的图像相同。

window.onload = function() {

  //Check File API support
  if (window.File && window.FileList && window.FileReader) {
    var filesInput = document.getElementById("files");

    filesInput.addEventListener("change", function(event) {

      var files = event.target.files; //FileList object
      var output = document.getElementById("result");

      for (var i = 0; i < files.length; i++) {
        var file = files[i];

        //Only pics
        if (!file.type.match('image'))
          continue;

        var picReader = new FileReader();

        picReader.addEventListener("load", function(event) {

          var picFile = event.target;

          var div = document.createElement("div");

          div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
            "title='" + picFile.name + "'/>";

          output.insertBefore(div, null);

        });

        //Read the image
        picReader.readAsDataURL(file);
      }

    });
  } else {
    console.log("Your browser does not support File API");
  }
}

article {
  width: 80%;
  margin: auto;
  margin-top: 10px;
}

.thumbnail {
  height: 100px;
  margin: 10px;
}

<article>
  <label for="files">Select multiple files: </label>
  <input id="files" type="file" multiple/>
  <div id="result"></div>
</article>

​

请一个接一个地输入多个图像

Answer 1

如果你想上传照片倍数。此方法将防止用户输入一张图片，然后，用户将能够在上传前输入下一张图片。

​

$(document).ready(function() {
  $(document).on("click", 'input[name="images-post[]"]', function() {
    $('.menu-create-post .mdi-camera').append('<input type="file" name="images-post[]" accept="image/*" multiple="multiple">');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="wrapper">
  <span class="span-wrapper" style="display: inline-block;">
    <input type="file" name="images-post[]"/>
  </span>
</div>
<div class="menu-create-post">
  <div class="mdi-camera"></div>
</div>

​