Geek Answers Handbook

Add undo or interrupt function to load multiple plugins to download files

I use a boot plugin to upload multiple files to upload a file. I use the example that is located at this link. Now I want to add another "Cancel Download" button, except for the "Add Files" button. When you click the "Cancel Download" button, the download process should be stopped. Please help me solve this problem. Thanks

+5
jquery twitter-bootstrap file-upload multiple-file-upload bootstrap-file-upload
source share
2 answers

Finally, after extensive testing and errors and finding relevant software solutions, I got the job exactly the way I wanted! I sent my request to the gigub page and got help from there.

The following is an example of code that really worked:

1. First you need to bind the fileuploadadd event:

$('#fileupload').bind('fileuploadadd', function(e, data){ var jqXHR = data.submit(); // Catching the upload process of every file $('#cancel_all').on('click',function(e){ jqXHR.abort(); }); });

2. Then you need to bind the cancel event, which will be triggered when you click the "Cancel Download" button, which cancels the entire downloaded file:

 $('#fileupload').bind('fileuploadfail', function(e, data){ if (data.errorThrown === 'abort') { //PUT HERE SOME FEEDBACK FOR THE USER } });
+9
source share

I think you can find your answer in the plugin document from here , I am posting the code here:

 var jqXHR = $('#fileupload').fileupload('send', {files: filesList}) .error(function (jqXHR, textStatus, errorThrown) { if (errorThrown === 'abort') { alert('File Upload has been canceled'); } }); $('button.cancel').click(function (e) { jqXHR.abort(); });

The above code means downloading files programmatically (in manual mode). In this case, for the fileupload function, the second argument must be an object with an array (or a similar list array) of File or Blob objects as a file property. Therefore, you need to get an array of files before executing on the code:

 var filesList = $("#fileupload").get().files;

I'm not sure if I need to convert the FileList to an array, as shown below, but you can try:

 var i,files = $("#fileupload").get().files,filesList=[]; for(i=0;i<files.length;i++){ filesList.push(files.item(i)) }

But keep in mind that there are limitations: The file is only supported using IE10 + and other modern browsers.

For more information, I will list some articles here:

0
source share

More articles:


All Articles