如何逐個上傳多個文件？

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>

上面的代碼只會在您選擇時提交文件，但您可以自定義它以獲得進度條，在閱讀提供的文檔后一次選擇多個文件或逐個選擇。

官方文件：閱讀

Answer 2

我建議你使用任何Jquery文件上傳插件。

它將顯示進度和拖放支持，並處理AJax上傳功能，因此您可以逐個選擇上傳多個文件。

我推薦這個https://innostudio.de/fileuploader/

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

如何逐個上傳多個文件？

問題描述

2 個解決方案

解決方案1
0 2019-06-11 05:29:57

解決方案2
0 2019-06-11 05:36:49

如何逐個上傳多個文件？

問題描述

2 個解決方案

解決方案1 0 2019-06-11 05:29:57

解決方案2 0 2019-06-11 05:36:49

解決方案1
0 2019-06-11 05:29:57

解決方案2
0 2019-06-11 05:36:49