Detailed instructions on the use of the Web Uploader File Upload plug-in and the use of uploader

Detailed instructions on the use of the Web Uploader File Upload plug-in and the use of uploader

The WebUploader File Upload Component can take full advantage of HTML5 in modern browsers without abandoning mainstream ie browsers. It is compatible with IE6 +, iOS 6 +, and, android 4 +. The same call method can be used at any time during the two sets of running. The use of large file multipart concurrent upload greatly improves the File Upload efficiency.

I. Functions

Sharding and concurrency

Combining multipart and concurrency, a large file is divided into multiple parts for concurrent upload, greatly improving the upload speed of large files.

When a network problem leads to a transmission error, you only need to re-upload the faulty part instead of the entire file. In addition, multipart transmission can track the upload progress in real time.

Preview and Compression

Common image formats: jpg, jpeg, gif, bmp, and png are supported for preview and compression, Saving network data transmission.

Parse the meta information in jpeg, correctly process various orientation operations, compress and upload all the original meta data of the retained image.

Add files in multiple ways

Supports multiple file selection, type filtering, drag and drop (file & folder), and image pasting.

The pasting function is mainly embodied in the following: When image data is in the clipboard (screenshot tools such as QQ (Ctrl + ALT + A), right-click the image on the webpage and click Copy ), ctrl + V to add this image file.

HTML5 & FLASH

Compatible with mainstream browsers and consistent interfaces, and supports two sets of runtime support. You do not need to worry about the Kernel used internally.

At the same time, Flash does not do any UI-related work, so it is easy to ignore flash user expansion and custom business needs.

MD5 second pass

When the file size is large and the volume is large, the md5 value of the file can be verified before upload. If the file size is consistent, the file can be skipped directly.

If the server and the front-end modify the algorithm in a unified manner and get the md5 segment, the verification performance can be greatly improved, and the time consumption is about 20 ms.

Scalable and sharable

The sharding mechanism is used to separate various functions into small components, which can be freely used together.

The code is organized using AMD specifications, which is clear and clear, making it easy for advanced gamers to expand.

Introduce Resources

To upload a Web Uploader file, you need to introduce three types of resources: JS, CSS, and 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 during initialization and will be displayed later -->

Ii. File Upload
WebUploader only includes the underlying implementation of file upload, not the UI part. Therefore, the interaction can be used freely. The following shows how to implement a simple version.

Html section
First, prepare the dom structure, including the container for storing file information, the select 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 a file </div> <button id =" ctlBtn "class =" btn-default "> Start upload </button> </div>

Initialize Web Uploader
For more information, see the comments in the code.

Var uploader = WebUploader. create ({// swf file path swf: BASE_URL + '/js/Uploader.swf', // file receiving server. Server: 'http: // webuploader.duapp.com/server/fileupload.php', // select the file button. Optional. // The internal operation is based on the current operation, which may be an input element or flash. pick: '# picker', // do not compress the image. If it is jpeg by default, the file will be compressed and then uploaded before being uploaded! Resize: false });

Show user selection
Webuploader does not process the UI logic, so it needs to listen to the fileQueued event for implementation.

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

File Upload progress
During file upload, Web Uploader will send an uploadProgress event to the outside, including the file object and the current upload progress of the file.
// The progress bar is displayed in real time during file upload. Uploader. on ('uploadprogress', function (file, percentage) {var $ li = $ ('#' + file. id), $ percent = $ li. find ('. progress. SS-bar '); // avoid repeated if (! $ Percent. length) {$ percent = $ ('<div class = "progress-striped active">' + '<div class = "progress-bar" role = "progressbar" style = "width: 0% "> '+' </div> '). appendTo ($ li ). find ('. SS-bar ');} $ li. find ('p. state '). text ('uploading in progress '); plain percent.css ('width', percentage * 100 +' % ');});
File Processing succeeded or failed
If the file fails to be uploaded, an uploadError event is sent. If the file is successfully uploaded, an uploadSuccess event is sent. Whether the upload succeeds or fails, the uploadComplete event is 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 ('. SS ss '). fadeOut ();});
3. upload images
Compared with normal file upload, this demo demonstrates the functions of file filtering, image preview, and image compression upload.
Html
To implement the preceding demo, you must first prepare a button and a container to store the list of added file information.
<! -- Dom Structure --> <div id = "uploader-demo"> <! -- Used to store item --> <div id = "fileList" class = "uploader-list"> </div> <div id = "filePicker"> select image </div> </div>
Javascript
Create a Web Uploader instance
// Initialize Web Uploadervar uploader = WebUploader. create ({// whether to automatically upload the file after the file is selected. Auto: true, // swf file path swf: BASE_URL + '/js/Uploader.swf', // file receiving server. Server: 'http: // webuploader.duapp.com/server/fileupload.php', // select the file button. Optional. // Create an image file based on the current operation, which may be an input element or flash. pick: '# filePicker'. // only image files can be selected. Accept: {title: 'images', extensions: 'gif, jpg, jpeg, bmp, png ', mimeTypes: 'image /*'}});
Listen to the fileQueued event and use uploader. makeThumb to create an image preview.
PS: here we get Data URL Data. IE6 and IE7 do not support direct preview. You can use FLASH or the server to complete the preview.
// Uploader when a file is added. on ('filequeued', function (file) {var $ li = $ ('<div id = "' + file. id + '"class =" file-item thumbnail ">' + '' + '<div class =" info ">' + file. name + '</div>'), $ img = $ li. find ('img '); // $ list is the container jQuery instance $ list. append ($ li); // create a thumbnail // you do not need to call this method if it is not an image file. // ThumbnailWidth x thumbnailHeight is 100x100 uploader. makeThumb (file, function (error, src) {if (error) {$ img. replaceWith ('<span> cannot be previewed </span>'); return;} $ img. attr ('src', src) ;}, thumbnailWidth, thumbnailHeight );});
The remaining part is the upload status prompt. When the file is uploaded successfully, the upload fails, and the upload is complete, it corresponds to the uploadProgress, uploadSuccess, uploadError, and uploadComplete events respectively.
// The progress bar is displayed in real time during file upload. Uploader. on ('uploadprogress', function (file, percentage) {var $ li = $ ('#' + file. id), $ percent = $ li. find ('. SS span '); // avoid repeated if (! $ Percent. length) {$ percent = $ ('<p class = "progress"> <span> </p> '). appendTo ($ li ). find ('span ');} specify percent.css ('width', percentage * 100 +' % ');}); // The file is uploaded successfully and the class is added to the item, the upload is successfully marked with a style. Uploader. on ('uploadsuccess', function (file) {$ ('#' + file. id ). addClass ('upload-state-done') ;}); // An error occurred while uploading the file. Uploader. on ('uploaderror', function (file) {var $ li = $ ('#' + file. id), $ error = $ li. find ('div. error '); // avoid repeated if (! $ Error. length) {$ error = $ ('<div class = "error"> </div> '). appendTo ($ li);} $ error. text ('upload failed') ;}); // After the upload is complete, the progress bar is deleted. Uploader. on ('uploadcomplete', function (file) {$ ('#' + file. id). find ('. progress'). remove ();});
The above is an introduction to the use of the Web Uploader File Upload plug-in. I hope it will be helpful for your learning.