Uploadify solution that cannot be uploaded under Firefox, java version (Spring + SpringMVC + MyBatis) detailed solution

Uploadify solution that cannot be uploaded under Firefox, java version (Spring + SpringMVC + MyBatis) detailed solution
Because of the technical selection, in a product, I chose uploadify because it has a complete technical documentation description (http://www.uploadify.com/documentation ), the only drawback is that the example in the official document is written in php. However, it is difficult to find a suitable example for our students who use the Java language. Especially when you encounter browser compatibility problems, after a long time, you finally find that you have compiled the content on the Internet, and the problem still persists, the explanation is not detailed.

Next I will share with you the symptoms and solutions I have encountered, hoping to help you quickly solve problems in Java projects.

Error:

In IE and Google browsers, when uploadify is used to upload files, it is normal that the files can be uploaded successfully. When Firefox browser is used, it cannot be uploaded either. No response. It's really disappointing.

Solution:

1. I searched Baidu for "uploadify compatibility/uploadify incompatible acquisition" and found many articles, but I read them carefully and found that they were all written by myself. The main reason is (the following section is excerpted from: http://blog.csdn.net/longlong821/article/details/7785703 ):

   Jquery uploadify can be uploaded normally under ie. During asynchronous upload, each file is submitted to the server for a request. Each request requires security verification, session and cookie verification. Yes, that's it. Because jquery uploadify uploads data using flash, ie automatically binds local cookie storage to the server every time a data stream request is sent to the backend. But firefox and chrome won't do this, and they will think this is not safe.

   Session, also known as Session status, is the most common status in the Web system and is used to maintain information related to the current browser instance. For example, we can put the username of the logged-on user in the Session, so that we can determine whether the user is logged on by judging a Key in the Session. If the user is logged on, the username is the same. We know that Session is a "one-person copy" for each client (or browser instance). When a user establishes a connection with the Web server for the first time, the server will distribute a SessionID to the user as the identifier. SessionID is a random string consisting of 24 characters. Each time a user submits a page, the browser will include this SessionID in the HTTP header and submit it to the Web server, so that the Web server can distinguish the client of the current request page.

   1. Next, combine the examples in http://www.jb51.net/article/40824.htm:

      <Script type = "text/javascript"> $ (Document). ready (function (){ $ ("# Fileupload"). uploadify ({ 'Swf ':'/uploadify/scripts/uploadify.swf ', 'Upload': '/fileupload; jsessionid =$ {pageContext. session. id }', 'Auto': true, 'Multi ': false, 'Buttontext': 'browse ', 'Filedesc': 'supported formats: jpg/gif/jpeg/png/bmp .', 'Fileext ':' *. jpg; *. gif; *. jpeg; *. png; *. bmp ', 'Onuploadsuccess': onUploadSuccess }); }); </Script>

      The most important part is the red part. Note that the one before jsessionid is a semicolon rather than a question mark. The question mark is passed as a parameter.

      1. Finally, the search is ongoing. Because uploadify depends on flash, we recommend that you install the Adobeflash plug-in for Firefox.

      2. Finally, compile your own uploadify upload example:

         1. Compile the example of jsessionid acquisition, in our project, I put it in the common-session.jsp, the content is as follows (the reason for this writing is that our front and back use different common. to use the same jsessionid for both the frontend and backend servers, use <% @ include file =Common-session.jsp"%> Include in. Note: if you do not do this, they are in two sets of common. in jsp, write the following jsessionid code, and finally find that either the background can be used for upload; the foreground can be used for upload; or the background can be uploaded after the foreground is uploaded once, and vice versa ):

         <% @ Page isELIgnored ="False"%> <% @ Page language ="Java"PageEncoding =UTF-8"%> <% @ Taglib uri ="Http://java.sun.com/jsp/jstl/core"Prefix ="C"%> <% String sessionid = session. getId (); %> "Jsessionid" value = "<% = sessionid %>" scope = "Session"/> <Script name = Type = "Text/javascript"> VarJsessionid = '$ {jsessionid }'; </Script>

         2. Introduce the above "common-session.jsp in common. jsp

         3. Compile the background java upload logic. Here I use springMVC + Spring + MyBatis, and the background code is as follows (the following code is not what I wrote, I don't think the following java code is standard. Here we allow everyone to hehe and vomit ):

         Package XXXX;   Import java. io. File; Import java. io. InputStream; Import java. util. ArrayList; Import java. util. Calendar; Import java. util. HashMap; Import java. util. List; Import java. util. Map; Import net. sf. json. JSONObject;   Import org. apache. log4j. Logger; /** Skip some code here **/   @ Controller @ RequestMapping (value = "/import", method = {RequestMethod. GET, RequestMethod. POST }) Public class ImportController extends BaseController { /** Used to print logs */ Private static final Logger logger = Logger . GetLogger (SpecialController. class );   /** * Upload images * @ Param * @ Param imageFile * @ Return */ @ RequestMapping (value = "/uploadPicture", produces = "text/json ") @ ResponseBody Public String uploadPicture (@ RequestParam ("file") MultipartFile imageFile ){ Map Result = new HashMap (); If (! ImageFile. isEmpty ()){ Try { Calendar calendar = Calendar. getInstance (); // gets the current time // Time path, decompress the file, and create a folder by year, month, and day String dataPath = "/" + calendar. get (Calendar. YEAR) + "/" + (Calendar. get (Calendar. MONTH) + 1) + "/" + calendar. get (Calendar. DATE) + "/"; // Original file name String srcName = imageFile. getOriginalFilename (); // Obtain the suffix of the uploaded file String suffix = srcName. substring (srcName. lastIndexOf (".") + 1, SrcName. length (). toLowerCase (); // Generate a 32-bit random id for extracting the file directory String uuid = UUIDGenerator. generate (); // New file name, random uuid; String picName = uuid + "." + suffix;   // Upload the image generation path String imgPath = ExtendedServerConfig. getInstance () . GetStringProperty ("THUMBNAIL_PATH") + ExtendedServerConfig. getInstance () . GetStringProperty ("BACKGROUND_IMG_PATH") + dataPath; // Generate the image preview path String picturePath = ExtendedServerConfig. getInstance () . GetStringProperty ("BACKGROUND_IMG_PATH") + dataPath + picName; // If the folder does not exist, create File destfile = new File (imgPath ); If (! Destfile. exists ()){ Destfile. mkdirs (); } // Write an object InputStream fi = imageFile. getInputStream (); // Upload a file and write it to the configuration folder. FileUtils. writeFile (fi, imgPath + picName ); File file = new File (imgPath + picName ); If (file. exists ()){ Result. put ("imgPath", picturePath); // The preview path of the returned image. Result. put ("ilename", srcName ); } } Catch (Exception e ){ E. printStackTrace (); } }   Return JSONObject. fromObject (result). toString (); } }

         4. Compile the js upload method of uploadify:

         /** * Upload background images *@ ParamId of the "select" button in uploadId background settings *@ ParamThe preview image of the "image" in the imgDivId background settingsDivId *@ ParamSetting imgSrcId background"ImgThe id of the tag.SrcUsed for value assignment *@ ParamThe value of the text box hidden by bgImgPath stores the image path. *@ ParamChildPathOfSelectedElement indicates the selected *@ ParamPosFlag indicates who to set the title * "0": indicates the title. * "1": indicates the list */ FunctionUploadBackgroundImg (uploadId, imgDivId, imgSrcId, bgImgPath, childPathOfSelectedElement, posFlag ){   $ ("#" + UploadId). uploadify ({ // Automatic upload? 'Auto ':True, 'Height': 37, 'Swf ': scriptsPath + "/uploadify/uploadify.swf ", // Container ID after file selection 'Queue id': 'uploaditemlist ', 'Fileobjname': 'file ', // Upload Handler 'Upload': basePath + '/import/uploadPicture. action; jsessionid =' + jsessionid, // File suffix that can be uploaded 'Filetypeexts': '*. jpg; *. gif; *. png ;', // Size limit of uploaded files 'Filesizelimmit ': '300mb ', // Upload quantity 'Queuesizelimit ': 1, 'Queue id': 'filequeue ', // Upload to the server, and the server returns the corresponding information to the data 'Onuploadsuccess ':Function(File, data, response ){ VarO = $. parseJSON (data ); VarImgPath = o. imgPath; If(ImgPath = "" | imgPath =Null){ Alert ("Image Upload Failed "); }Else{ $ ("#" + ImgDivId). show (); VarPath = vPath + imgPath; $ ("#" + ImgSrcId). attr ("src", path ); $ ("#" + BgImgPath). val (imgPath ); VarId = selectedElementInfo. get ("id"); // obtain the property value of the id $. TplComponentListSetting. removeCss (id, childPathOfSelectedElement, "background-image"); // remove the original background image VarStyleCss = $ ("# generatedCss"). text (); VarStyleText = "#" + id + childPathOfSelectedElement + "{background-image: url ('" + path + "')! Important ;}"; // Replace or splice at the end StyleCss + = "\ r \ n" + styleText; $ ("# GeneratedCss"). text (styleCss );   // Indicates the title If("0" = posFlag ){ // Set related parameter information $ ("." + Id + "_ titleBackgroundAbsoluteImg"). val (path ); $ ("." + Id + "_ titleBackgroundRelativeImg"). val (imgPath ); } // Indicates the list Else If("1" = posFlag ){ Console. log ("temporarily omitted here "); } } } }); }

         Note the above 'upload': basePath + '/import/uploadPicture. action; jsessionid =' + jsessionid,