Multi file upload using Web Uploader

Introducing resources

Using Web Uploader file upload requires the introduction of three 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 Specify at initialization, which will be shown later -->

File Upload

WebUploader only contains the underlying implementation of file upload, not the UI section.So the interaction side is free, so here's how to implement a simple version.

Please click the Select File button below and then click Start Upload to experience this Demo.

Html Part

First, prepare the dom structure, which contains three parts: the container for storing file information, the selection button and the upload button.

<div id="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="btn btn-default"> Start uploading </button> 
</div> 
</div>

Initialize Web Uploader

Specific instructions, see the comments section in the code below 1.

var uploader = WebUploader.create({ 
// swf File Path  swf: BASE_URL + '/js/Uploader.swf', 
//  File Receiving Server. 
server: 'http://webuploader.duapp.com/server/fileupload.php', 
//  Button to select a file. 
 Optional.  
//  Internally created based on the current run, possibly input Element, or may be flash. pick: '#picker',
//  No compression image,  If the default is jpeg , the file will be compressed before uploading 1 Upload again!  
resize: false });

Show user selection

Since webuploader does not handle UI logic, it needs to listen for fileQueued events to implement.

//  When files are added to the queue  uploader.on( 'fileQueued', function( file )
{ $list.append( '<div id="' + file.id + '" class="item">' + '<h4 class="info">' + file.name + '</h4>' + '<p class="state"> Waiting for upload ...</p>' + '</div>' ); });

File Upload Progress

During file upload, Web Uploader will send an uploadProgress event to the outside, which contains the file object and the current upload progress of the file.

//  Create a progress bar for real-time display during file upload. 
uploader.on( 'uploadProgress', function( file, percentage )
{ var $li = $( '#'+file.id ), $percent = $li.find('.progress .progress-bar'); 
//  Avoid duplicate creation  if ( !$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(' Uploading '); $percent.css( 'width', percentage * 100 + '%' ); });

File handling success, failure

Failed file uploads send uploadError events, and successful uploadSuccess events.Whether successful or unsuccessful, the uploadComplete event is triggered after the file has been 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 normal file upload, this demo demonstrates functions such as file filtering, picture preview, picture compression upload, etc.

Html

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

<!--dom Structural part -->
<div id="uploader-demo"> 
<!-- For storage item-->
<div id="fileList" class="uploader-list">
</div> <div id="filePicker"> Select Picture </div>
</div>

Javascript

Create an Web Uploader instance

//  Initialization Web Uploader var uploader = WebUploader.create({ //  Whether to upload files automatically after selecting them. 
auto: true, // swf File Path  swf: BASE_URL + '/js/Uploader.swf', //  File Receiving Server. 
server: 'http://webuploader.duapp.com/server/fileupload.php', //  Button to select a file. 
 Optional. 
//  Internally created based on the current run, possibly input Element, or may be flash. pick: '#filePicker', //  Only picture files are allowed to be selected. 
accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } });

Listen for the fileQueued event and create a picture preview using uploader.makeThumb.

PS: This is the Data URL data, IE6, IE7 do not support direct preview.You can use FLASH or the server to complete the preview.

//  When files are added  uploader.on( 'fileQueued', function( file )
{ var $li = $( '<div id="' + file.id + '" class="file-item thumbnail">' + '<img>' + '<div class="info">' + file.name + '</div>' + '</div>' ),
$img = $li.find('img'); // $list For Containers jQuery Example  $list.append( $li ); //  Create Thumbnail  //  If it is a non-picture file, you do not need to call this method.  
// thumbnailWidth x thumbnailHeight  by  100 x 100 uploader.makeThumb( file, function( error, src ) 
{
if ( error ) 
{ 
$img.replaceWith('<span> Cannot Preview </span>'); return; 
} $img.attr( 'src', src ); }, thumbnailWidth, thumbnailHeight ); });

Then there is the upload status prompt, when the file upload process, upload success, upload failure, upload completion correspond to uploadProgress, uploadSuccess, uploadError, uploadComplete events, respectively.

//  Create a progress bar for real-time display during file upload.  
uploader.on( 'uploadProgress', function( file, percentage )
{ var $li = $( '#'+file.id ), $percent = $li.find('.progress span'); //  Avoid duplicate creation  
if ( !$percent.length )
{ $percent = $('<p class="progress"><span></span></p>') .appendTo( $li ) .find('span');
}
$percent.css( 'width', percentage * 100 + '%' ); }); //  File uploaded successfully to item Added Successfully class,  Successfully uploaded with style markers.  
uploader.on( 'uploadSuccess', function( file )
{ $( '#'+file.id ).addClass('upload-state-done'); }); //  File upload failed, showing upload errors. 
uploader.on( 'uploadError', function( file ) 
{ var $li = $( '#'+file.id ), $error = $li.find('div.error'); //  Avoid duplicate creation  if ( !$error.length )
{ $error = $('<div class="error"></div>').appendTo( $li );
} $error.text(' Upload failed '); }); 
//  Finish uploading, success or failure, delete the progress bar first. 
uploader.on( 'uploadComplete', function( file )
{ $( '#'+file.id ).find('.progress').remove(); });