javascript - 数组上的多个图像上传 - Javascript/Jquery

Question

我想通过 JavaScript 上传一些图像数组。我尝试了以下代码:

<script type="text/javascript">
var count =0;
$(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $("#files").on("change", function(e) {
      var files = e.target.files,
        filesLength = files.length;
        count++;
      for (var i = 0; i < count; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"removeImg\">Remove image</span>" +
            "</span>").insertAfter("#files");
          $(".removeImg").click(function(){
            $(this).parent(".pip").remove();
          });

          // Old code here
          /*$("<img></img>", {
            class: "imageThumb",
            src: e.target.result,
            title: file.name + " | Click to remove"
          }).insertAfter("#files").click(function(){$(this).remove();});*/

        });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Your browser doesn't support to File API")
  }
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

HTML

  <div class="field" align="left">
      <h3>Upload your images</h3>
      <input type="file" id="files" name="files[]" multiple />
    </div>

但是在某个地方，当我单击表单上的提交按钮时，它只向我发送一个文件的数组，这是最后更新的文件。我想要它的数组..以便我稍后可以处理该数据。

请帮帮我。

Answer 1

我已经测试了您的代码，它工作正常，您只需要将 for 循环中的 count 变量替换为 filesLength 变量，然后您将获得所有图像，而不是您之前获得的最后一张图像!下面是更正后的代码。运行代码，它将为您工作!在 upload.php 中写入时，您将获得您选择的图像数量!

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
var count =0;
$(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $("#files").on("change", function(e) {

      var files = e.target.files,
        filesLength = files.length;
        console.log(filesLength);
        count++;
      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"removeImg\">Remove image</span>" +
            "</span>").insertAfter("#files");
          $(".removeImg").click(function(){
            $(this).parent(".pip").remove();
          });

          // Old code here
          /*$("<img></img>", {
            class: "imageThumb",
            src: e.target.result,
            title: file.name + " | Click to remove"
          }).insertAfter("#files").click(function(){$(this).remove();});*/

        });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Your browser doesn't support to File API")
  }
});
</script>


<form id="imageform" method="post" enctype="multipart/form-data" action="upload.php">
  <div class="field" align="left">
      <h3>Upload your images</h3>
      <input type="file" id="files" name="files[]" multiple />
    </div>
    <input type="submit" name="submit" value="Submit">
</form>


    <form id="imageform" method="post" enctype="multipart/form-data">
      <div class="field" align="left">
          <h3>Upload your images</h3>
          <input type="file" id="files" name="files[]" multiple />
        </div>
        <input type="submit" name="submit" value="Submit">
    </form>