如何一个一个地上传多个文件？答案

【问题标题】：How to upload multiple files one by one?如何一个一个地上传多个文件？
【发布时间】：2019-10-25 11:26:57
【问题描述】：

当我一起选择文件并提交表单时，所有文件都会上传。但是，如果我一一选择并单击提交。仅上传一个文件。

<html>
 <form role="form" class="form-horizontal" enctype="multipart/form-data"  action="submit.php" method='post' >
<input name="files[]" id="files" type="file" class="btn btn-primary" multiple="multiple"  accept="application/pdf,image/jpeg,image/gif,image/png,video/mp4" />

</form>


<script>
$(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $("#files").on("change", function(e) {
      var files = e.target.files,
        filesLength = files.length;
      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=\"remove\"><i class='fa fa fa-times' aria-hidden='true'></i></span>" +
            "</span>").insertAfter("#files");
          $(".remove").click(function(){
            $(this).parent(".pip").remove();
          });

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

【问题讨论】：

标签： javascript jquery html file file-upload

【解决方案1】：

您的代码的当前行为符合预期。input type=file 将允许您一次选择多个文件并在设置多个标签时提交表单。但在您打开浏览窗口并选择的情况下一个文件，只有那个文件会被提交。

即使您通过打开浏览逐个选择文件，上下文也会被清除，并且只有您选择的最后一个文件被选中提交。如果您想覆盖此默认行为，您必须自己在 javascript 中处理，不推荐。

使用下面的 jquery 插件来实现这些功能，因为它会避免大量的样板代码和时间：

https://blueimp.github.io/jQuery-File-Upload/basic.html

<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery File Upload Example</title>
    </head>
    <body>
        <input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="js/vendor/jquery.ui.widget.js"></script>
        <script src="js/jquery.iframe-transport.js"></script>
        <script src="js/jquery.fileupload.js"></script>
        <script>
            $(function () {
                $('#fileupload').fileupload({
                     dataType: 'json',
                     done: function (e, data) {
                        $.each(data.result.files, function (index, file) {
                            $('<p/>').text(file.name).appendTo(document.body);
                         });
                     }
                });
            });
        </script>
    </body>
</html>

上面的代码会根据你的选择提交文件，但是你可以自定义它有进度条，在阅读提供的文档后一次或一个选择多个文件。

官方文档：read

【讨论】：

【解决方案2】：

我建议你使用任何 Jquery 文件上传插件。

它将显示进度和拖放支持，并处理AJax上传功能，因此您可以通过一个一个选择上传多个文件。

或者你可以找到很多列表https://jqueryhouse.com/jquery-file-upload-plugins/

【讨论】：