The WebUploader file upload component can fully utilize the advantages of HTML5 in modern browsers, while not abandoning mainstream IE browsers, using the original FLASH runtime, and is compatible with IE6+, iOS 6+, android 4+. The two sets of running time, the same call method can be selected by users at will. The use of large file fragmentation concurrent uploading greatly improves the efficiency of file uploading.
1. Function introduction
Sharding, concurrency
Sharding and concurrency combine to divide a large file into multiple blocks and upload concurrently, greatly improving the upload speed of large files.
When network problems cause transmission errors, you only need to retransmit the error shard, not the entire file. In addition, shard transmission can track upload progress more in real time.
Preview, compression
Supports common image formats jpg, jpeg, gif, bmp, png preview and compression to save network data transmission.
Analyze the meta information in jpeg, and correctly handle various orientations. At the same time, after compression, upload and retain all the original meta data of the image.
Add files through multiple channels
Supports multiple file selection, type filtering, drag and drop (file & folder), and picture pasting functions.
The paste function is mainly reflected in the fact that when there is image data in the clipboard (screenshot tools such as QQ (Ctrl + ALT + A), right-click the image in the web page and click copy), Ctrl + V can add this image file.
HTML5 & FLASH
Compatible with mainstream browsers, consistent interfaces, and implement two sets of runtime support, so users do not need to care about what kernels are used internally.
At the same time, the Flash part does not do any UI-related work, which is convenient for users who do not care about flash's expansion and custom business needs.
MD5 seconds pass
When the file size is large and the quantity is relatively large, it supports file md5 value verification before uploading. If it is consistent, you can skip it directly.
If the server and the front-end modify the algorithm uniformly and take segment md5, it can greatly improve the verification performance and take about 20ms.
Easy to expand and detachable
The detachable mechanism is adopted to separate the functions into widgets and can be matched freely.
The code is organized using AMD specifications, which is clear and clear, making it convenient for advanced players to expand.
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-->
2. 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.
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();});3. Upload pictures
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 Uploadervar 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');});// The 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 an introduction to how to use the Web Uploader file upload plug-in. I hope it will be helpful to everyone's learning.