在jQuery Multi文件上传器中完成上传后刷新页面

Question

I'm using jQuery Multifile uploader ( https://github.com/blueimp/jQuery-File-Upload ) with PHP

and I want to refresh the uploads page once all files got uploaded, I'm using basic plus UI, please tell me if is there any easy way to achieve it

Answer 1

Use the done and fail events along with some counters. Found these events in the options documentation .

var fileCount = 0, fails = 0, successes = 0;

$('#fileupload').fileupload({
    url: 'server/php/'
}).bind('fileuploaddone', function(e, data) {
  fileCount++;
  successes++;
  console.log('fileuploaddone');
  if (fileCount === data.getNumberOfFiles()) {
    console.log('all done, successes: ' + successes + ', fails: ' + fails);
    // refresh page
    location.reload();
  }
}).bind('fileuploadfail', function(e, data) {
  fileCount++;
  fails++;
  console.log('fileuploadfail');
  if (fileCount === data.getNumberOfFiles()) {
    console.log('all done, successes: ' + successes + ', fails: ' + fails);
    // refresh page
    location.reload();
  }
});

Answer 2

You can use the stop event. It is equivalent to the global ajaxStop event (but for file upload requests only).

stop: function(e){
      location.reload();
}

Answer 3

I have used this code and so far it works well.

$('#fileupload').bind('fileuploadstop', function (e) {
  console.log('Uploads finished');        
    location.reload(); // refresh page
    });

Answer 4

I used ryan's code, but there was a problem. The value of data.getNumberOfFiles() was decreasing as the files were uploaded while fileCount was increasing, so my upload script got interrupted at the middle of my upload where data.getNumberOfFiles() was equal to fileCount.

Here is how i tweaked ryan's script and now it's working like a charm:

var fileCount = 0, fails = 0, successes = 0;
var _totalCountOfFilesToUpload = -1;

$('#fileupload').bind('fileuploaddone', function (e, data) {
    if (_totalCountOfFilesToUpload < 0) {
         _totalCountOfFilesToUpload = data.getNumberOfFiles();
    }
    fileCount++;
    successes++;
    if (fileCount === _totalCountOfFilesToUpload) {
        console.log('all done, successes: ' + successes + ', fails: ' + fails);
        // refresh page
        location.reload();
    }
}).bind('fileuploadfail', function(e, data) {
    fileCount++;
    fails++;
    if (fileCount === _totalCountOfFilesToUpload) {
        console.log('all done, successes: ' + successes + ', fails: ' + fails);
        // refresh page
        //location.reload();
    }
});

I hope this will help other people as well as! :)