Question

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

<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>

Answer 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

Answer 2

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

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

我推荐这个https://innostudio.de/fileuploader/

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

如何一个接一个地上传多个文件？

2 个答案: