Webuploader Upload Tool

http://fex.baidu.com/webuploader/getting-started.html# Show User Selection

HTML section

Prepare the DOM structure first, including the container that holds the file information, the selection button and the upload button three parts.

<divid= "uploader" class= "Wu-example" > <!--used to store file information--<div id=  "thelist" class= "uploader-list" ></div > <div class= "Btns" > <div id= "picker" > Select File  </div> <button id= "ctlbtn" class=< Span class= "s" > "btn Btn-default" > start uploading </button> </ Div></DIV>            

Initializing the web Uploader

For specific instructions, take a look at the comments section in the code.

var uploader = webuploader.< Span class= "NX" >create ({//swf file path swf: base_url +  '/js/uploader.swf ' // The file receives the service side. server:  ' http://webuploader.duapp.com/server/fileupload.php ' Span class= "P", //Select the File button. Optional. //internally based on the current run is created, either the INPUT element or flash. pick:  ' #picker '  //does not compress image, Default if it is JPEG, the file will be compressed before uploading! resize: false      

Show User Selection

Because Webuploader does not handle UI logic, it needs to be monitored for fileQueued events.

When a file is added to the queueUploader.On ( ' filequeued ' function (file ) { $list . Append ( ' <div id= "' + file.< Span class= "NX" >id +  "class=" item "> ' +  < h4 class= "Info" > ' + file. Name +  ' +  ' <p class= ' state ' > Wait to upload ...</p> ' +  </div> ' );    

File Upload Progress

On the file, the Web uploader dispatches the uploadProgress event, which contains the file object and the current upload progress of the file.

Create a progress bar in real-time display during file upload.Uploader.On(' Uploadprogress ',function(File,Percentage){Var$li=$(‘#‘+File.Id),$percent=$li.Find('. Progress. Progress-bar ');Avoid duplicate creationIf(!$percent.Length){$percent=$(' <div class= ' progress progress-striped active ' > '+' <div class= ' Progress-bar "role=" ProgressBar "style=" width:0% ">"+' </div> '+ ' </div> ').  AppendTo( $li ).  Find('. Progress-bar '); } $li.  Find(' p.state ').  Text(' in-upload '); $percent.  CSS( ' width ', percentage *  + '% ' );});     

File success, failure handling

A file upload failure dispatches an uploadError event, and the event is dispatched successfully uploadSuccess . Regardless of success or failure, events are triggered after the file has been uploaded uploadComplete .

Uploader.On(' Uploadsuccess ',function(File){$(‘#‘+File.Id).Find(' P.state ').Text(' uploaded ');});Uploader.On(' Uploaderror ',function(File){$(‘#‘+File.Id). Find(' p.state ').  Text(' upload error ');}); uploader.  On( ' uploadcomplete ', function( file ) { $( ' # '+file . ID ). Find('. Progress ').  FadeOut();});                

Image upload

Webuploader Upload Tool