jquery component Webuploader File upload usage detailed _jquery

Webuploader was developed by the Baidu Webfe (FEX) team, a simple HTML5, flash supplemented by the modern file upload components, below to show you about jquery webuploader File Upload component usage.

Use Webuploader can also bulk upload files, support thumbnails and so many parameter options can be set, as well as multiple event methods can be called, you can customize the upload component you want.

Next I upload the example with the picture, to explain how to use Webuploader.

Html

We first load the CSS and related JS files.

<link rel= "stylesheet" type= "Text/css" href= "Css/webuploader.css" > 
<script src= "http://" Cdn.bootcss.com/jquery/1.12.4/jquery.min.js "></script> 
<script type=" Text/javascript "src=" js/ Webuploader.min.js "></script>

Then we need to prepare a button #imgpicker, and a container to hold the list of added file information #filelist, add the following code in the body:

<div id= "uploadimg" > 
 <div id= "filelist" class= "uploader-list" ></div> 
 <div id= " Imgpicker "> select pictures </div> 
</div>

Javascript

First create a Web uploader instance:

var uploader = webuploader.create ({ 
 auto:true,//After selecting files, whether to automatically upload 
 swf: ' js/uploader.swf ',//SWF file path 
 server: ' Upload.php ',//File Receive server 
 pick: ' #imgPicker ',//Select File button. Optional 
 //only allows you to select a picture file. 
 Accept: { 
 title: ' Images ', 
 extensions: ' gif,jpg,jpeg,bmp,png ', 
 mimetypes: ' image/* ' 
 } 
});

Then listen for filequeued events, that is, when a file is added, create a picture preview by Uploader.makethumb.

Uploader.on (' filequeued ', function (file) { 
 var $list = $ ("#fileList"), 
 $li = $ ( 
  ' <div id= ' + file.id + ' "class=" File-item thumbnail "> ' + 
  '  ' + 
  ' <div class=" info "> ' + file.name + ' </div> ' +< c6/> ' </div> ' 
  , 
 $img = $li. Find (' img '); 
 
 
 $list for the container jquery instance 
 $list. Append ($li); 
 
 Create thumbnail 
 uploader.makethumb (file, function (Error, SRC) { 
 if (error) { 
  $img. replacewith (' <span> No Can preview </span> '); 
  return; 
 } 
 
 $img. attr (' src ', src); 
 }, 100, 100); 100x100 to thumbnail size 
});

Finally, upload status prompts, when the file upload process, upload success, upload failure, upload complete corresponding uploadprogress, uploadsuccess,
Uploaderror, Uploadcomplete event.

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 ('. Progre 
 
 SS 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, res) {Console.log (Res.filepath);//Here you can get the uploaded file path $ (' # ' +file.id). ADDC 
Lass (' 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 ();
 });

Here, we realize a simple picture upload instance, click "Select Picture" will pop-up file selection dialog box, when the selection of pictures, that is, into the upload image process, will be the corresponding thumbnail image reality in the list.

Common option settings and event calls

Web Uploader provides rich API option settings and event invocation.

Common Event Descriptions:

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.