jquery FileUpload Plugin

demo:https://blueimp.github.io/jquery-file-upload/

Github:https://github.com/blueimp/jquery-file-upload

Api:https://github.com/blueimp/jquery-file-upload/wiki/api

Recently always encountered upload problem, has been using jquery-fileupload this plug-in, there is a detailed API documentation, the specific usage does not do a detailed description.

Just fill the hole.

(1) Automatic upload and non-automatic, user-triggered,

$ (' #fileupload '). FileUpload ({    function  (e, data) {     // bind trigger button Event       $.(" #okBtn "). On (" click ",function() {         data.submit ();           })    });

(2) ie8,9 Picture Preview issue

The previous blog has written about this encapsulation method, we can turn a look;

(3) IE8 input box User Click event
"Input=file", when obtaining a file, cannot indirectly trigger a Input=file change event under IE8 by a button click event,

If the design is so required, you can use the style to solve, the input transparent to the upper, put the original button position above

(4) After selection, the event cancels abort

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

(5) Multiple files, one request upload at a time

<form>    <inputname= "file1[]"type= "File"multiple/>    <BR/>        <inputname= "file2[]"type= "File"multiple/>    <BR/>        <inputname= "file3[]"type= "File"multiple/>    <BR/>     <Button>Send by FileUpload Send API</Button></form>

$ (document). Ready (function () {    var fileslist = [],        paramnames = [],        elem = $ ("form");    File_upload = Elem.fileupload ({        formdata:{extra:1},        Autoupload:false,        fileInput: $ ("Input:file"),    }). On ("Fileuploadadd", function (E, data) {        Fileslist.push (data.files[0]);        Paramnames.push (E.delegatedevent.target.name);    });    $ ("button"). Click (function (e) {        e.preventdefault ();        File_upload.fileupload (' send ', {files:fileslist, paramname:paramnames})    })

jquery FileUpload Plugin