jquery Jquery-file-upload Example

Examples of online jquery-file-upload are too simple, this plugin is often used in the project, write an example for reference.

The following is a plugin implementation of the image asynchronous upload code.


1 more than the JS one can not be less, they are dependent on the relationship between.

Jquery-1.8.2.min.js
Jquery.ui.core.js
Jquery.ui.widget.js
Jquery.fileupload.js
Jquery.iframe-transport.js
Jquery.fileupload-process.js
Jquery.fileupload-validate.js
(The last 2 JS is dependent, the missing word acceptfiletypes,maxfilesize will not be verified)

2 post Code:

<script>$ (function () {uploadimageajaxdelete = function (url,obj) {$.ajax ({url:url,async:false,datatype: "text ", success:function (data) {if (data== ' 1 ') {//If Delete succeeds, the use of file is restored, and the picture gradient disappears $ (obj)." Parent (). Children ("Input[type  = ' file ']. Removeattr ("Disabled"); $ (obj). Parent (). Children ("img"). FadeOut ("Slow", function () {$ (). Add (obj). Parent (). Children ("a")). Add ($ (obj      ). Parent (). Children ("Input:hidden")). Add ($ (obj). Parent (). Children ("BR")). Remove ();    }); }else{alert (' Picture deletion failed!  ‘);    }}});} $ ("input[type= ' file ']"). FileUpload ({url: ' image_ajax_save.action ', DataType: ' JSON ', Autoupload:tru E, Acceptfiletypes:/(\.| \/) (Gif|jpe?g|png) $/i, maxfilesize:2097152//2 MB}). On (' Fileuploadadd ', function (e, data) {$ (this). Pare   NT (). Children ("label"). Remove (); $ ("<p class= ' uploadimgload ' > upload in ...  0%</p> "). AppendTo ($ (this). parent ()); $ (this). attr ("Disabled", True);}). On (' Fileuploadprocessalways ', funCtion (E, data) {if (Data.files.error) {$ (this). Parent (). Children ("P"). Remove ();   $ (this). Removeattr ("Disabled"); if (data.files[0].error== ' Acceptfiletypes ') {$ (this). Parent (). Append ("<label class= ' error ' > Picture type errors </label   > "); } if (data.files[0].error== ' MaxFileSize ') {$ (this). Parent (). Append ("<label class= ' error ' > picture cannot be greater than 2m</label& (GT; ");}}).    On (' Fileuploadprogressall ', function (e, data) {var $p = $ (this). Parent (). Children ("P"); var progress = parseint (Data.loaded/data.total * +), if ($p. length==0) {$ ("<p class= ' uploadimgload ' > Upload ... "+progress+"%</p> "). AppendTo ($ (this). parent ());   else{Console.info (progress); $p. Text (' Upload ...   ' +progress+ '% ');  if (progress==100) {$p. FadeOut ("Slow", function () {$ (this). Remove ();   });     }}). On (' Fileuploaddone ', function (e, data) {if (data.result.result== ' error ') {$ (this). Removeattr ("Disabled"); Alert (' Sorry, upload too fast, please wait a moment!  ‘);   }else if (data.result.result== ' success ') { $ (this). Parent (). Prepend ($ ("<a href= ' # ' > Delete </a>"). attr ("onclick", "Uploadimageajaxdelete (' Image_ajax_ Delete.action?dbfilename= "+data.result.dbfilename+", "this)"). Add ("<br/>"). Prepend ($ (" "). attr (" src ", Data.result.url)). Prepend ($ (" <input type= ' hidden ' name= ' +  Data.result.hiddenname+ "id=" +data.result.hiddenname+ "value=" "+data.result.dbfilename+" '/> "); }});}); </script>

3 effect: see attached picture.



4 Note: The operation of the time must be viewed: Api,demo
Https://github.com/blueimp/jQuery-File-Upload/wiki/API
Http://blueimp.github.io/jQuery-File-Upload/basic.html

In addition to the use of the debug plugin FireFox, there are script output breakpoint function, as well as the console.info display.

jquery Jquery-file-upload Example