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

Multiple Image upload on array - Javascript/Jquery

本文关键字：-Javascript Jquery 图像 数组      更新时间：2023-09-26

我想通过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>

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

请帮帮我。

我已经测试了你的代码，它运行得很好，你只需要用filesLength变量替换for循环中的count变量，然后你就会得到所有的图像，而不是以前得到的最后一个！！以下是更正后的代码。一定要运行代码，它会为你工作的！在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>
相关文章：