Refreshing the page after completing uploads in jQuery Multi file Uploader

问题

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

回答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();
  }
});

回答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();
}

回答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
    });

回答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! :)

来源：https://stackoverflow.com/questions/18636845/refreshing-the-page-after-completing-uploads-in-jquery-multi-file-uploader

标签

php

javascript

jquery

file-upload

blueimp