使用JQuery blueimp上传多个文件

Question

我正在尝试使用blueimp jquery fileupload库执行多个文件上传。 链接到库-https: //github.com/blueimp/jQuery-File-Upload

文件正在上传。 但是一次只能上传一个文件。 多个文件也正在上传，但单个文件一次已上传。 我不确定这是什么错误。

PHP

<?php

// A list of permitted file extensions
$allowed = array('png', 'jpg', 'gif','zip', 'html','php', 'py', 'jpeg', 'txt');
for ($i=0; $i < count($_FILES); $i++) { 
if(isset($_FILES['files']) && $_FILES['files'][$i]['error'] == 0){

    $extension = pathinfo($_FILES['files'][$i]['name'], PATHINFO_EXTENSION);

    if(!in_array(strtolower($extension), $allowed)){
        echo '{"status":"error 1", "extension": "'.$extension.'"}';
        exit;
    } 
    if(move_uploaded_file($_FILES['files'][$i]['tmp_name'], __DIR__.'/upl/'.$_FILES['files'][$i]['name'])){
        echo '{"status": "success"}';
    }
}
else {
    echo '{"status":"error"}';
    exit;
}

}

?>

HTML

<div class="message">
<h1>Files to be uploaded: </h1>
</div>
<div class="result">
</div>
<input id="fileupload" type="file" name="files[]" multiple>
<br><br>
<input type="submit" name="submit" id="upload">

JS

$(function () {
 $('#fileupload').fileupload({
    dataType: 'json',
    url: 'act',
    add: function(e,data) {
      console.log("added for uploading"); 
      console.log(data.files[0].name);
      if( $(".message").is(":hidden") ) {
        $(".message").show();
      }
      $(".message").append("<p>"+ data.files[0].name + "</p>");
      $("#upload").click(function(){
        data.submit();
      })
    },
    start: function (e) {
    console.log('start');
    },
    done: function (e, data) {
      console.log("success in uploading data");
      console.log(data);
      console.log(data.files[0].name);
        // $.each(data.files, function (index, file) {
        //     $('<p/>').text("file name: " + file.name).appendTo($(".message"));
        // });
      $(".message").hide();
      $(".result").append("Uploading files");
    },
    fail: function (e, data) {
      console.log(data);
      console.log("failed to perform");
        $.each(data.messages, function (index, error) {
            $('<p style="color: red;">Upload file error: ' + error + '<i class="elusive-remove" style="padding-left:10px;"/></p>')
            .appendTo('.message');
        });
    }
});
});

多个文件正在上传。 但一次只能上传一个文件。 我的意思是，如果我提交了3个文件，则只会首先发送第一个文件进行上传，然后发送第二个文件，最后发送第三个文件。 而不是将所有三个文件作为数组发送。 每次将发送一个文件。 即总共将发送3个数组。 而且任何人都可以帮助您执行分块。 谢谢！！

更新将数据附加到data.files中是有问题的，而不是每次都将文件创建到数组中而不是将文件附加到数组中。 但是我不确定为什么要这样做！

Answer 1

最后看了一点文档。 我发现，通常blueimp fileuploader每个文件发出一个请求。 这就是为什么每次我上传不同文件时，它都会不同时间上传每个文件的原因。

为同一请求处理多个文件。

$('#fileupload').fileupload({
    dataType: 'json',
    autoUpload: false,
    url: 'act',
    maxChunkSize: 10000000,
    maxFileSize: 1000000000,
    singleFileUploads: false,

singleFileUploads: false实际上是禁用单个文件上传。 我从这里的文档中获得了它-https: //github.com/blueimp/jQuery-File-Upload/wiki/Options#singlefileuploads

谢谢你的帮助