Jquery file batch upload control Uploadify3.2 (java springMVC), jqueryuploadify3.2

Jquery file batch upload control Uploadify3.2 (java springMVC), jqueryuploadify3.2

People are relatively lazy and practical.

Put the Uploadify official link: http://www.uploadify.com/--> inside can see the PHP example, attribute description, and control. Divided into flash (free) and html5 (charged ).

You can see the demo on the official website.

In addition, I found an Uploadify3.2 Chinese API document on the Internet, which can be downloaded from my uploaded resources.

The following is an example of springMVC-based file upload, which may seem more intuitive than the document ···

1. Download the plug-in to the project.

2. Introduce the following JS and CSS on 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">

3. Create and display DIV and operation buttons on the jsp page

</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"> <! -Batch upload button --> </form>

4. Edit js Code

$ (Document ). ready (function () {$ ("# file_upload "). uploadify ({'swf ':' $ {ctxStatic}/uploadify/geo_fileUpload.swf ', // control the flash file location // The request processed in the background (that is, the action Request Path ), the jsessionid is appended to indicate that the current session is used (by default, a new session is opened, which leads to a 302 error in session verification requests) 'upload ': '$ {ctx}/testFu; jsessionid =$ {pageContext. session. id} ', 'queueid': 'queue', // corresponds to the following HTML div. id corresponds to 'width': '000000', // button width 'height': '32', // button height 'filetypedesc': 'specify type file', 'f IleTypeExts ':'*. jpg ;*. png ', // control the file extension that can be uploaded. When this item is enabled, you must declare fileDesc 'fileobjname':' "uploadify" ', 'buttontext': 'batch upload ', // The content displayed by the upload button. You can set another attribute to 'filesizelimmit ': '100kb', 'Multi': true, 'overrideevents': ['ondialogclose ', 'onuploadsuccess', 'onuploaderror', 'onselectererror'], // rewrite the default method 'onallback': function () {// call alert when detecting FLASH failure ("You have not installed the FLASH control and cannot upload images! Install the FLASH control and try again. ") ;}, // The following method corresponds to the overrideEvents overload method. The specific implementation is the code of another friend found on the Internet, // I have extracted these methods into a custom js. I will post 'onselect': uploadify_onSelect, 'onselecterror ': uploadify_onSelectError, 'onuploaderror': uploadify_onUploadError, 'onuploadsuccess': uploadify_onUploadSuccess });});

5. Methods of the controller class

@ ResponseBody @ RequestMapping (value = "testFu") public String testUpload (MultipartRequest request, HttpServletResponse response) {// I tried to use Map to obtain Map <String, MultipartFile> fileMap = request although each file is uploaded separately. 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"; // a prompt message is returned to the foreground}

6. The appendix is taken from the list of overload methods on the Internet. I have made some changes to make it more practical (thanks to the unknown experts on the Internet)

Var uploadify_onSelectError = function (file, errorCode, errorMsg) {var msgText = "Upload Failed \ n"; switch (errorCode) {case SWFUpload. 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" + $ ('# file_upload '). uploadify ('settings', 'queuesizelimit ') + "files! "; Break; case SWFUpload. QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT: msgText + = "file [" + file. name + "] The size exceeds the system limit" + $ ('# file_upload '). uploadify ('settings', 'filesizelimit ') + "size! "; Break; case SWFUpload. QUEUE_ERROR.ZERO_BYTE_FILE: msgText + = "the file size is 0"; break; case SWFUpload. QUEUE_ERROR.INVALID_FILETYPE: msgText + = "the file format is incorrect. Only" + this. settings. fileTypeExts; break; default: msgText + = "error code:" + errorCode + "\ n" + errorMsg;} alert (msgText);}; var uploadify_onUploadError = function (file, errorCode, errorMsg, errorString) {// if (errorCode = SWFUpload. UPLOAD_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 + = "the upload file is lost. please upload it again"; 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 + = "maximum upload each time" + this. settings. uploadLimit + "; break; case SWFUpload. UPLOAD_ERROR.UPLOAD_FAILED: msgText + = errorMsg; break; case SWFUpload. UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND: msgText + = "the specified file cannot be found. Please operate again"; break; case SWFUpload. UPLOAD_ERROR.FILE_VALIDATION_FAILED: msgText + = "parameter error"; break; default: msgText + = "file:" + file. name + "\ n Error Code:" + errorCode + "\ n" + errorMsg + "\ n" + errorString;} alert (msgText);} var uploadify_onSelect = function () {}; var uploadify_onUploadSuccess = function (file, data, response) {alert ("Save the information returned by the upload background of each file, which is displayed in the onQueueComplete method ");}; var uploadify_onQueueComplete = function () {alert ("complete all --> and display prompt information ");}

Now, you can upload the Uploadify files in batches. If you have any questions, please leave a message for us to discuss. This control is easy to understand. The purpose of writing this article is to help you get started faster and save valuable time.

In a Java Web project, how does one select and upload files in batches? If there are any good plug-ins, it is best to have relevant code examples

Jquery. uploadify batch upload control [html] <link href = "styles/uploadify.css" rel = "stylesheet" type = "text/css"/> <script type = "text/javascript" src = "styles/uploadify.swf"> </script> <script type = "text/javascript" src = "javascripts/jquery. uploadify. min. js "> </script> <link href =" styles/uploadify.css "rel =" stylesheet "type =" text/css "/> <script type =" text/javascript "src = "styles/uploadify.swf"> </script> <script type = "t Ext/javascript "src =" javascripts/jquery. uploadify. min. js "> </script> and jquery. js, you know! Note that the css file will reference this image, so please specify the position of this image. Otherwise, this cross is not displayed. This cross is deleted, no is blank! [Javascript] <script> function snedUpLoad () {var pid = $ ("# entityId "). val (); // This is the custom parameter var entityName = $ ("# entityName") obtained by myself "). val (); // same as $ ("# uploadify "). uploadify ({// initialize uploadify is the input id // 'debug': false, // dubug mode. The default value is false 'auto': false, // automatic upload, that is, automatic upload of the control. The default value is true 'multi ': true, // 'successtimeout': 99999, // The timeout value is 'formdata': {'pid ': p ...... remaining full text>


The jquery uploadify32 version cannot be uploaded. Note that it is a 32 version. Even the official DEMO cannot be uploaded. Why?

If the image data cannot be saved in the background, is it not available in the background?