Quickly grasp jquery plugin webuploader file upload _jquery

File uploads are a common feature of web sites and Web applications, and there has been no perfect file upload component, so many developers are having headaches with browser compatibility issues.

Webuploader is developed by the Baidu FEX team to HTML5, FLASH supplemented by the modern file upload components. In the modern browser can give full play to the advantages of HTML5, while not abandoning mainstream IE browser, the original FLASH run, compatible with Ie6+,ios 6+, Android 4+. The use of large file fragmentation concurrent upload, greatly improve the efficiency of file upload.

Reference Baidu website to learn from, collation, the specific contents are as follows

First of all, the characteristics of Webuploader :

Fragmentation, concurrency

The combination of fragmentation and concurrency, a large file is divided into multiple, concurrent upload, greatly improve the upload speed of large files.

When a network problem causes a transmission error, you only need to retransmit the wrong fragment instead of the entire file. In addition, the fragment transmission can track the upload progress more real-time.

Specific to see: jQuery webuploader fragmentation upload large files

Preview, Compress

Support commonly used picture format Jpg,jpeg,gif,bmp,png Preview and compression, save network data transmission.

Parse the meta information in JPEG, do the correct processing for all kinds of orientation, compress and upload all the original meta data that keep the picture.

Multiple ways to add files

Support file selection, type filter, drag (file & folder), picture pasting function.

Paste function is mainly reflected in when there is picture data in the Clipboard (screen tools such as QQ (Ctrl + ALT + A), the Web page right click picture click Copy), Ctrl + V can add this picture file.

HTML5 & FLASH

Compatible with the mainstream browser, the interface is consistent, the implementation of two sets of run-time support, the user does not care about the internal use of what the kernel.

At the same time, the Flash section does not do any UI-related work, easy to care about Flash user extensions and custom business requirements.

MD5 Second Pass

When the file volume is large, the amount of time to support the upload before the file MD5 value verification, consistent can be directly skipped.

If the service end and the front end unify the modification algorithm, takes the segment MD5, may enhance the verification performance greatly, time is about 20ms.

Easy to expand, split

A detachable mechanism is used to separate the functions into small components, which can be freely paired with each other.

Adopt AMD Specification organization code, clear and easy, convenient advanced player expands.

Only know the Webuploader file upload plug-in features, can more fully play its role.

How to use it?

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-->

1, File Upload

Webuploader only contains the underlying implementation of the file upload, excluding the UI part, so the interaction is free to play.

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 ('. Progress. Progress-bar ');

 Avoid duplicating the
 if (! $percent. Length) {
 $percent = $ (' <div class= ' progress progress-striped active ' > ' +
 ' &L T;div class= "Progress-bar" role= "ProgressBar" style= "width:0%" > ' +
 ' </div> ' + '
 </div> '). Appendto ($li). Find ('. Progress-bar ');

 $li. Find (' p.state '). Text (' upload ');

 $percent. css (' width ', percentage * + '% ');
});

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

2, picture upload

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, 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-item 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 (er ROR) {
 $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 correspond to uploadprogress, uploadsuccess, Uploaderror, uploadcomplete events.

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 ('. Progress span ');

 Avoid duplicating the
 if (! $percent. Length) {
 $percent = $ (' <p class= ' progress ' ><span></span></p > ')
 . Appendto ($li)
 . Find (' span ');

 $percent. css (' width ', percentage * + '% ');
});

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 creating duplicate
 if (! $error. Length) {
 $error = $ (' <div class= ' error ' ></div> '). Appendto ($li); c23/>}

 $error. Text (' upload failed ');

Small case: Webuploader use Java How to implement upload?

HTML code

<div id= "uploader" class= "wu-example" > <div class= "queuelist" > <div id= "Dndarea" class= "placeholder" "> <div id=" filepicker "></div> <p> or drag photos here, the maximum optional 300 </p> </div> </div& 
  Gt <div class= "StatusBar" style= "Display:none;" > <div class= "Progress" > <span class= "text" >0%</span> <span class= "Percentage" ></spa n> </div> <div class= "info" ></div> <div class= "Btns" > <div id= "FilePicker2" & gt;</div> <div class= "uploadbtn" > Start uploading </div> </div> </div> </div> < !--webuploader--> <link rel= "stylesheet" type= "Text/css" href= "/static/js/webuploader/css.css" > <link re L= "stylesheet" type= "Text/css" href= "/static/js/webuploader/image.css" > <script type= "text/javascript" src= " Static/js/webuploader/min.js "></script> <script type=" Text/javascript "src="/staTic/js/webuploader/upload-image.js "></script> 

 

JS Code

Instantiate 
 uploader = webuploader.create ({ 
 pick: { 
 ID: ' #filePicker ', 
 label: ' Click to select Picture ' 
 }, 
 DND: ' Uploader. Queuelist ', 
 paste:document.body, 
 accept: { 
 title: ' Images ', 
 extensions: ' Gif,jpg,jpeg, Bmp,png ', 
 mimetypes: ' image/* ' 
 }, 
 //swf file path 
 [color=red]swf: '/static/js/webuploader/ Uploader.swf ', [/color] 
 disableglobaldnd:true, 
 chunked:true, 
 server: '/point/image/bulk.html ', 
 filenumlimit:300, 
 filesizelimit:50*1024*1024,//5m 
 filesinglesizelimit:5*1024*1024//1M 
 }); 

Uploading files like normal spring

Java code

@RequestMapping ("/bulk") 
@ResponseBody public 
String Bulk (httpservletrequest request, multipartfile file) { 
 String Path = super.uploadfile (Request, "file", true); 
 return "1"; 
} 

Reference

Spring MVC3.2 starts supporting file uploads via Servlet3.0

XML code

Copy Code code as follows:

<bean id= "Multipartresolver" class= " Org.springframework.web.multipart.support.StandardServletMultipartResolver "></bean>

For more highlights, please click on the "jquery Upload operation Summary" for in-depth study and research.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.