javascript - 我可以在输入文件中一张一张地插入图像吗？

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>