Introduce resources
Uploading files using Web Uploader requires the introduction of three resources: JS, CSS, and SWF.
<!--Introducing CSS--> <link rel="stylesheet" type="text/css" href="webuploader folder/webuploader.css"> <!--Introducing JS--> <script type="text/javascript" src="webuploader folder/webuploader.js"></script><!--SWF is specified during initialization and will be displayed later-->
File upload
WebUploader only contains the underlying implementation of file uploads and does not include the UI part. Therefore, you can freely play the interactive aspects. The following will demonstrate 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, including three parts: containers that store file information, selection buttons and upload buttons.
<div id="uploader"> <!-- Used to store file information--><div id="thelist"></div><div><div id="picker">Select file</div><button id="ctlBtn">Start upload</button> </div> </div>
Initialize the Web Uploader
For details, please look at the comments section in the code.
var uploader = WebUploader.create({ // swf file path swf: BASE_URL + '/js/Uploader.swf', // File reception server. server: 'http://webuploader.duapp.com/server/fileupload.php', // Select the file button. Optional. // Create internally according to the current run, which may be an input element or flash. pick: '#picker',// No image compression, default if it is jpeg, it will compress and upload it again before uploading! resize: false });Show user selection
Since the webuploader does not handle UI logic, it is necessary to listen to the fileQueued event to implement it.
// When a file is added to the queue uploader.on( 'fileQueued', function( file ){ $list.append( '<div id="' + file.id + '">' + '<h4>' + file.name + '</h4>' + '<p>wait for upload...</p>' + '</div>' ); });File upload progress
When the file is uploaded, the Web Uploader will send an uploadProgress event, which contains the file object and the current upload progress of the file.
// Create a progress bar to display in real time during file upload. uploader.on( 'uploadProgress', function( file, percentage ){ var $li = $( '#'+file.id ), $percent = $li.find('.progress .progress-bar'); // Avoid repeated creation of if ( !$percent.length ) { $percent = $('<div>' + '<div role="progressbar">' + '</div>' + '</div>').appendTo( $li ).find('.progress-bar'); } $li.find('p.state').text('uploading'); $percent.css( 'width', percentage * 100 + '%' ); });File success and failure processing
If the file upload fails, the uploadError event will be sent, and if the file is successfully uploaded, the uploadSuccess event will be sent. 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(); }); uploader.on( 'uploadComplete', function( file ){ $( '#'+file.id ).find('.progress').fadeOut(); });Image upload
Compared with ordinary file uploads, this demo demonstrates: file filtering, image preview, image compression upload and other functions.
Html
To implement the demo as above, you first need to prepare a button and a container to store the added file information list.
<!--dom structure part--><div id="uploader-demo"> <!-- Used to store item--><div id="fileList"></div> <div id="filePicker">Select pictures</div></div>
Javascript
Create a Web Uploader instance
// Initialize Web Uploader var uploader = WebUploader.create({ // Whether to upload automatically after selecting the file.auto: true, // swf file path swf: BASE_URL + '/js/Uploader.swf', // File reception server. server: 'http://webuploader.duapp.com/server/fileupload.php', // Select the file button. Optional. // Create internally according to the current run, which may be an input element or flash.pick: '#filePicker', // Only image files are allowed.accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } });Listen to fileQueued event and create image preview through uploader.makeThumb.
PS: What you get here is Data URL data, and IE6 and IE7 do not support direct preview. Preview can be completed with FLASH or the server.
// When a file is added, uploader.on( 'fileQueued', function( file ){ var $li = $( '<div id="' + file.id + '">' + '<img>' + '<div>' + file.name + '</div>' + '</div>' ),$img = $li.find('img'); // $list is a container jQuery instance$list.append( $li ); // Create thumbnail// If it is a non-image file, you don't need to call this method. // thumbnailWidth x thumbnailHeight is 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 the rest is the upload status prompt. When the file upload process is uploaded, the upload is successful, the upload failed, and the upload is completed, the uploadProgress, uploadSuccess, uploadError, and uploadComplete events are respectively corresponding to the uploadProgress, uploadSuccess, uploadError, and uploadComplete events.
// Create a progress bar to display in real time during file upload. uploader.on( 'uploadProgress', function( file, percentage ){ var $li = $( '#'+file.id ), $percent = $li.find('.progress span'); // Avoid repeated creation if ( !$percent.length ){ $percent = $('<p><span></span></p>') .appendTo( $li ) .find('span');}$percent.css( 'width', percentage * 100 + '%' ); }); // The file is uploaded successfully, add a successful class to the item, and mark the upload with style. uploader.on( 'uploadSuccess', function( file ){ $( '#'+file.id ).addClass('upload-state-done'); }); // File upload failed, and an upload error was displayed. uploader.on( 'uploadError', function( file ) { var $li = $( '#'+file.id ), $error = $li.find('div.error'); // Avoid repeated creation if ( !$error.length ){ $error = $('<div></div>').appendTo( $li );} $error.text('Upload failed'); }); // After the upload is completed, it is successful or failed, delete the progress bar first. uploader.on( 'uploadComplete', function( file ){ $( '#'+file.id ).find('.progress').remove(); });The above is the relevant knowledge introduced to you by using Web Uploader to achieve multi-file uploading. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!