使用JQuery blueimp上传多个文件

Question

I am trying to perform multiple fileupload with blueimp jquery fileupload library. link to library - https://github.com/blueimp/jQuery-File-Upload

The files are uploading. But only a single file is uploading at a time. Multiple files are also uploading but single file is getting uploaded once. I am not sure what the error is.

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');
        });
    }
});
});

Multiple files are getting uploaded. but a single file is getting uploaded at a time. I mean if I submit 3 files, first file only will be sent first for uploading, then second file will be sent and finally third file will be sent. Instead of sending all the three files as an array. Each time a single file will be sent. ie totally 3 arrays will be sent. And also can anyone help about performing chunking. Thanks!!

UPDATE There is a problem in appending data to data.files, instead of appending files to the array it's creating a new object every time. But I am not sure why it is done!

Answer 1

Finally after reading documentation a bit. I found it out that generally blueimp fileuploader makes one request per file. That is the reason why it is uploading each file different times whenever I upload different files.

To process multiple files for same request.

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

singleFileUploads: false is actually disabling single file uploads. I got it from documentation here -- https://github.com/blueimp/jQuery-File-Upload/wiki/Options#singlefileuploads

Thanks for all the help