jquery file Bulk Upload control Uploadify3.2 (Java SPRINGMVC)

People are lazy practical mainly not typesetting

First put on the uploadify link: http://www.uploadify.com/---inside you can see examples of PHP, property descriptions, and controls. Divided into Flash version (free) and HTML5 version (charge).

You can see the effect demo on the official website.

Also found on the Internet a copy of the Uploadify3.2 Chinese API document, can be downloaded in the resources I upload.

Here is an example of a file upload based on SPRINGMVC, which may seem more intuitive than a document ...

1. Download the plugin into your project

2. Introduce the following JS and CSS in the JSP page

<script type= "Text/javascript" src= "${ctxstatic}/uploadify/jquery.uploadify.min.js" ></script>< Link type= "text/css" rel= "stylesheet" href= "${ctxstatic}/uploadify/uploadify.css" >

Create presentation div and action buttons in 3.jsp pages

</pre><pre name= "code" class= "HTML" ><form><div id= "queue" ></div><!-upload queue display area-- <input id= "File_upload" name= "file_upload" type= "file" multiple= "true" ><!-bulk upload button--></form>

4. Edit the JS code

$ (document). Ready (function () {$ ("#file_upload"). Uploadify ({' swf ': ' ${ctxstatic}/uploadify/geo_fileupload.swf ',// Control Flash file location//Background processing request (that is, the action request path), appended with Jsessionid, used to indicate the use of the current session (the default is to open a new session, will cause the existence of the session check 302 Error in Request) ' uploader ': ' ${ctx}/testfu;jsessionid=${pagecontext.session.id} ', ' Queueid ': ' Queue ',/ /div.id corresponding to the following HTML ' width ': ' 100 ',//button width ' height ': ' 32 ',//button height ' filetypedesc ': ' Specify type file ', ' filetypeexts ': ' *.jpg;*.png ', Control the extension of the file can be uploaded, enable this item must also declare Filedesc ' fileobjname ': ' "uploadify" ', ' buttontext ': ' Bulk upload ',//Upload button display content, There is also a property to set the button's background image ' Filesizelimit ': ' 100KB ', ' Multi ': true, ' overrideevents ': [' ondialogclose ', ' onuploadsuccess ', ' Onuploaderror ', ' Onselecterror '],//overrides default method ' Onfallback ': function () {//Detect Flash failed call alert ("You do not have Flash control installed, cannot upload picture!") Please install the Flash control and try again. ");},//The following method is an overloaded method corresponding to the overrideevents, the implementation is found on the internet a friend's code,//I drew these methods into a custom JS, I'll put it on the last side ' OnSelect ': uploadify_onselect, ' ONselecterror ': uploadify_onselecterror, ' onuploaderror ': uploadify_onuploaderror, ' onuploadsuccess ': uploadify_ Onuploadsuccess});

Methods of the 5.controller class

@ResponseBody @requestmapping (value = "testfu") public String testupload (multipartrequest request, HttpServletResponse Response) {//I tried a bit although each file was uploaded separately but here also use map to get map<string,multipartfile> Filemap = Request.getfilemap (); for ( String Key:fileMap.keySet ()) {Multipartfile mfile = Filemap.get (key); Mfile.getname (); Mfile.getoriginalfilename (); Mfile.getsize ();//Business Operation code begin//business Operation code End}return "test test";//return to foreground prompt message}

6. The appendix is from the list of overloaded methods on the web, and I made some changes to make it more practical (thanks to the network of unknown experts)

var uploadify_onselecterror = function (file, ErrorCode, errormsg) {var msgtext = "Upload failed \ n"; switch (errorCode) {case Swfuplo Ad. Queue_error. queue_limit_exceeded://this.queueData.errorMsg = "Upload at most" +//This.settings.queueSizeLimit + "files"; Msgtext + = " The number of uploaded files has exceeded the system limit of "+ $ (' #file_upload '). Uploadify (' Settings ', ' queuesizelimit ') +" Files! "; Break;case Swfupload.queue_error. File_exceeds_size_limit:msgtext + = "file [" + File.name + "] size exceeds system limit of" + $ (' #file_upload '). Uploadify (' Settings ', ' fileSize Limit ') + "size! "; Break;case Swfupload.queue_error. Zero_byte_file:msgtext + = "File size is 0"; Break;case swfupload.queue_error. Invalid_filetype:msgtext + = "file format is incorrect, limited to" + This.settings.filetypeexts;break;default:msgtext + = "Error code:" + ErrorCode + "\ n "+ errormsg;} alert (msgtext);}; var uploadify_onuploaderror = function (file, ErrorCode, ErrorMsg, errorstring) {//manual cancel does not eject prompt if (ErrorCode = = Swfupload.up Load_error. file_cancelled | | ErrorCode = = Swfupload.upload_error. upload_stopped) {return;} var msgtext = "Upload failed \ n"; switch (ErrorCode) {Case Swfupload.upload_error. Http_error:msgtext + = "HTTP error \ n" + errormsg;break;case Swfupload.upload_error. Missing_upload_url:msgtext + = "Upload file lost, please re-upload"; Break;case swfupload.upload_error. Io_error:msgtext + = "IO error"; Break;case swfupload.upload_error. Security_error:msgtext + = "Security error \ n" + errormsg;break;case Swfupload.upload_error. Upload_limit_exceeded:msgtext + = "Upload at maximum" + This.settings.uploadLimit + "one"; Break;case swfupload.upload_error. Upload_failed:msgtext + = Errormsg;break;case swfupload.upload_error. Specified_file_id_not_found:msgtext + = "Cannot find the specified file, please re-operate"; Break;case Swfupload.upload_error. File_validation_failed:msgtext + = "parameter error"; Break;default:msgtext + = "File:" + file.name + "\ n error code:" + ErrorCode + "\ n" + errorm sg + "\ n" + errorstring;} alert (msgtext);} var uploadify_onselect = function () {};var uploadify_onuploadsuccess = function (file, data, response) {alert (" Save the relevant information returned in the background of each file upload, and show "in the Onqueuecomplete Method"); var uploadify_onqueuecomplete = function () {alert ("All-in and show cue Message");}

To this uploadify file batch upload is OK. You can leave a message to discuss with us. This control is simple enough to take the time to read the words can be understood. The purpose of writing this article is also to let everyone get started faster, save valuable time

jquery file Bulk Upload control Uploadify3.2 (Java SPRINGMVC)