Using Web Uploader to implement multi-file upload _javascript skills

Introducing Resources

Use Web Uploader file upload need to introduce three kinds of resources: JS, CSS, SWF.

<!--introduce css--> 
<link rel= "stylesheet" type= "Text/css" href= "Webuploader folder/webuploader.css" > 
<!--introduce js--> 
<script type= "Text/javascript" src= "Webuploader folder/webuploader.js" >
</script >
<!--SWF is specified at initialization time and will be shown later in the-->

File Upload

Webuploader contains only the underlying implementation of the file upload, excluding the UI part. So the interactive aspect is free to play, and the following shows how to implement a simple version.

Please click on the Select File button below and click Start upload to experience this demo.

HTML section

First you prepare the DOM structure, which contains three parts of the container that holds the file information, the selection button, and the upload button.

<div id= "uploader" class= "wu-example" > 
<!--used to store file information--> <div id=
"Thelist" Uploader-list ">
</div>
<div class=" Btns ">
<div id=" Picker "> select File </div>
<button id= "ctlbtn" class= "btn Btn-default" > Start uploading </button> 
</div> 
</div>

Initializing Web Uploader

For details, take a look at the annotation section in the code.

var uploader = webuploader.create ({ 
//swf file path Swf:base_url + '/js/uploader.swf ', 
//File receive server.
server: ' http://webuploader.duapp.com/server/fileupload.php ', 
//Select File button.
Optional. // 
Internal according to the current run is created, may be input elements, may also be flash. Pick: ' #picker ',
//uncompressed image, default if JPEG, file upload will be compressed before uploading! 
Resize:false});

Show User Selection

Because Webuploader does not handle UI logic, it is necessary to listen for filequeued events to be implemented.

When a file is added to the queue Uploader.on (' filequeued ', function (file)
{$list. Append (' <div id= ' + file.id + ' "class=" item "> ' + ' 
 
 

File Upload Progress

File crosses, the Web uploader will dispatch the Uploadprogress event, which contains the file object and the current upload progress of the file.

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 ('. P rogress. Progress-bar '); 
Avoid repeatedly creating if (! $percent. Length) 
{$percent = $ (' <div class= ' progress progress-striped active ' > ' + ' <div CLA ss= "Progress-bar" role= "ProgressBar" style= "width:0%" > ' + ' </div> ' + ' </div> '). Appendto ($li). Find ('. Progress-bar '); $li. Find (' p.state '). Text (' upload '); $percent. css (' width ', percentage * 100 + '% '); });

File success, failure handling

File upload failure will dispatch Uploaderror event, Success is dispatch uploadsuccess event. Regardless of success or failure, the Uploadcomplete event will be triggered after the file is uploaded.

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

Picture upload

Compared with the normal file upload, this demo demo: File filtering, picture preview, image compression and upload functions.

Html

To implement the demo, you first need to prepare a button, and a container to hold the list of added file information.

<!--DOM structure part-->
<div id= "Uploader-demo" > 
<!--for storing item--> <div id=
"FileList" class= "Uploader-list" >
</div> <div id= "Filepicker" > select pictures </div>
</div>

Javascript

Create a Web uploader instance

Initializes the Web Uploader var Uploader = webuploader.create ({//) automatically uploads after the file is selected.
auto:true,//swf file path Swf:base_url + '/js/uploader.swf ',//File receive server.
server: ' http://webuploader.duapp.com/server/fileupload.php ',//Select File button.
Optional. //
Internal according to the current run is created, may be input elements, it may also be flash. Pick: ' #filePicker ',//Only allow selection of picture files.
Accept: {title: ' Images ', Extensions: ' Gif,jpg,jpeg,bmp,png ', mimetypes: ' image/* '}}

Listen for filequeued events and create a picture preview by Uploader.makethumb.

PS: Here is the data URL, IE6, IE7 does not support direct preview. You can use flash or the service side to complete the preview.

When a file is added Uploader.on (' filequeued ', function (file)
{var $li = $ (' <div id= ' + file.id + ' "class=" file-it EM thumbnail "> ' + '  ' + ' <div class=" info "> ' + file.name + ' </div> ' + ' </div> '),
$img = $li. Find (' img '); $list for the container jquery instance $list. Append ($li); Create thumbnails//If you are not a picture file, you do not have to call this method. 
//Thumbnailwidth x thumbnailheight x uploader.makethumb (file, function (Error, SRC) 
{
if (error 
{ 
$img. replacewith (' <span> cannot preview </span> '); return; 
} $img. attr (' src ', src);}, Thumbnailwidth, Thumbnailheight); });

Then the remaining is the upload status prompts, when the file upload process, upload success, upload failure, upload complete corresponding uploadprogress,uploadsuccess, Uploaderror, uploadcomplete events.

//File upload process to create the progress bar in real time display. Uploader.on (' uploadprogress ', function (file, percentage) {var $li = $ (' # ' +file.id), $percent = $li. Find ('. Progress s Pan '); Avoid duplicating the IF (! $percent. length) {$percent = $ (' <p class= ' progress ' ><span></span></p> '). Append
to ($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) {$ (' # ' +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 repeatedly creating 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 ();}); 

The above is a small part of the introduction of the use of Web uploader to achieve multiple file upload related knowledge, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!