jquery plugin webuploader implementation file upload _jquery

Recently used in the project Baidu file upload plug-in Webuploader, share to everyone.

Webuploader was developed by the Baidu Webfe (FEX) team, a simple HTML5-oriented, flash supplemented by a modern file upload component. In the modern browser can give full play to the advantages of HTML5, while not abandoning mainstream IE browser, the original flash run, compatible with Ie6+,ios 6+, Android 4+. Two sets of operation, the same way of invocation, can be optional for users. The use of large file fragmentation concurrent upload, greatly improve the efficiency of file upload.

Need to click on http://fex.baidu.com/webuploader/download.html to open link download webuploader

 Initialize Web uploader*** upload picture var Uploader = webuploader.create ({//After the file is selected, whether automatically uploaded. 
 Auto:true,//File receive server address, automatically generate thumbnails required backend completion. Server: '/common/uploadfile?imagezip=1 ',//Select File button. 
 Optional. 
 The interior is created according to the current run, possibly an INPUT element, or it may be flash. 
 Pick: ' #sendimg ', Filenumlimit:5,//allowmagnify:false,//Only allow selection of picture files. 
accept:{title: ' Images ', Extensions: ' Gif,jpg,jpeg,bmp,png ', mimetypes: ' image/* '}} When a file is added Uploader.on (' filequeued ', function (file) {var $li = $ (' <div style= ' float:right ' id= ' + file . ID + ' "class=" delimg "> ' + ' <div class=" closeimg ">x</div> ' + ' </div&gt 
  ;' 
 
 ), $img = $li. Find (' img '); 
 $list is the container jquery instance $ ("#piccon"). Append ($li); 
 Create thumbnails//If you are not a picture file, you do not have to call this method. 
  Thumbnailwidth x thumbnailheight for x uploader.makethumb (file, function (Error, SRC) {if (error) { 
  $img. ReplaceWith (' <span> cannot preview </span> '); 
  Return 
 $img. attr (' src ', src);}, 100, 100); 
 $li. On (' click ', Function () {$ (this). Remove (); 
 }) 
 }); 
 The file upload process creates a progress bar to display in real time. Uploader.on (' uploadprogress ', function (file, percentage) {var $li = $ (' # ' +file.id), $percent = $li. Find ('. Prog 
  
  Ress span '); 
   Avoid duplicating the IF (! $percent. length) {$percent = $ (' <p class= ' progress ' ><span></span></p> ') 
  . Appendto ($li). Find (' span '); 
 $percent. css (' width ', percentage * 100 + '% '); 
  
 }); 
 File upload Success, add success class to item, upload success with style tag. Uploader.on (' uploadsuccess ', function (file,response) {imgurl=response.filename;//here can get back to the background of the picture name//alert (imgurl) 
  ; 
 $ (' # ' +file.id). addclass (' Upload-state-done '); 
  
 }); 
 File upload failed, display upload error. 
  
  Uploader.on (' Uploaderror ', function (file) {var $li = $ (' # ' +file.id), $error = $li. Find (' div.error '); 
  Avoid duplicating the IF (! $error. length) {$error = $ (' <div class= ' error ' ></div> '). Appendto ($li); 
 $error. Text (' upload failed '); 
  
 }); Finished uploading., success or failure, first delete the progress bar. 
 Uploader.on (' uploadcomplete ', function (file) {$ (' # ' +file.id). Find ('. Progress '). Remove (); 
 });

For more highlights, please click on the "jquery Upload operation Summary" for in-depth study and research.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.