Analysis and explanation of uploadify + struts2 applications

Uploadify is a plug-in for processing batch file uploads under the jquery framework. It supports multiple types of server software. Unfortunately, the Instructions on the official website (www.uploadify.com) are not well-developed, focusing on the configuration of the JS part, rather than detailed descriptions of the data interfaces on the server side. In addition, the data interaction with the server is encapsulated in the SWF file, and it is difficult to analyze from the source code.

1) Analysis

To explore the application interface data of uploadify under struts2, a mini tool program requestobserver is compiled as follows:

package utils;import java.util.Enumeration;import java.util.Iterator;import java.util.Map;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpSession;import com.opensymphony.xwork2.ognl.OgnlValueStack;public class RequestObserver {    private HttpServletRequest request;       public RequestObserver(HttpServletRequest request) {        this.request = request;    }       public void observe() {        String name,pvalue;        Object avalue;        Enumeration enum1;        System.out.println("/***************** Request Observer (Author: Alex Nie)**************/");               // observe Request Header        enum1 = request.getHeaderNames();        System.out.println("Request Header:");        while (enum1.hasMoreElements()) {            name = (String)enum1.nextElement();            pvalue = request.getHeader(name);            System.out.println("  " + name + " ---- " + pvalue);        }        enum1 = request.getParameterNames();        // observe Request Parameters        System.out.println("Request Parameters:");        while (enum1.hasMoreElements()) {            name = (String)enum1.nextElement();            pvalue = request.getParameter(name);            System.out.println("  " + name + " ---- " + pvalue);        }        enum1 = request.getAttributeNames();        // observe Request Attributes        System.out.println("Request Attributes:");        while (enum1.hasMoreElements()) {            name = (String)enum1.nextElement();            avalue = request.getAttribute(name);            System.out.println("  " + name + " ---- " + avalue);                       // observe OgnlValueStack bind by Struts 2            if (avalue instanceof OgnlValueStack) {                avalue = (OgnlValueStack)avalue;                Map<String,Object> m = ((OgnlValueStack) avalue).getContext();                System.out.println("  >> OgnlValueStack:");                Iterator it = m.keySet().iterator();                Object key;                while (it.hasNext()) {                    key = it.next();                    System.out.println ("        " + key + " ---- " + m.get(key));                }            }        }        // observe Request Session        HttpSession session = request.getSession(false);        System.out.println("session: " + session);        if (session!=null)        {            System.out.println("  sessionId: " + session.getId());            enum1 = session.getAttributeNames();            System.out.println("Session Attributes:");            while (enum1.hasMoreElements()) {                name = (String)enum1.nextElement();                avalue = session.getAttribute(name);                System.out.println("  " + name + " ---- " + avalue);            }        }        System.out.println("/***************** End of Request Observer (Author: Alex Nie)**************/");           }   }

After simple configuration according to the instructions on the official website, the file upload operation is triggered from the browser. After receiving the corresponding request in the action on the server side, the above tool program is used to output and analyze the data in the request, the results are as follows:

Analysis result

During batch file upload, uploadify initiates a server connection for each uploaded file.

During each connection, uploadify passes 7 parameters to the server, and four parameters of the string type are passed through request parameters.

Filename: the original name of the file to be uploaded. The content is the same as xxxxfilename.

Fileext: the file type that can be uploaded. It is specified by the fileext parameter specified in the client section JS Code.

Folder: The storage path of the uploaded file during the service period, which is specified by the folder parameter specified in the client section JS Code.

Upload: useless

Three parameters are passed through request attributes.

XXXX: file type, the content of the uploaded file. XXXX is specified by the filedataname parameter specified in the client section JS Code.

Xxxxfilename: string type, the original name of the uploaded file. XXXX is specified by the filedataname parameter specified in the client section JS Code. The content is the same as the aforementioned filename.
Uploadifycontenttype: useless

The above seven parameters are encapsulated by struts2 on the server side and can be directly used in actions. It should be noted that the parameter names are not exactly the same in case and in JS, and some are written in case on the server in JS, while others are the opposite. In addition, there are two parameters with the same content, which are about some improvements to uploadify in terms of code style and conventions in the future.

After clarifying the data interface, it is clear how to write the uploadify action under struts2. Next, we will take uploading photos in batches as an example.

2) Detailed Analysis

Html

<input id="file_upload" name="photo" type="file"/><div id="fileQueue"></div>

Javascript

Introduce jquery-1.4.2.min.js, swfobject. JS, jquery. uploadify. v2.1.4.min. js

Introduce your own upload JavaScript code as follows (simplified description ):

$ (Document ). ready (function () {$ ('# file_upload '). uploadify ({// page related 'upload': '/JS/uploadify/uploadify.swf', // The Built-in flash of the component. Adjust the 'cancelim' according to the actual path ': '/JS/uploadify/cancel.png', // cancel the Upload File button image 'queue id': 'filequeue ', // ID of the HTML element containing the uploaded file and upload progress: 'queuesizelimmit ': 10, // maximum number of files uploaded at a time // The control switch 'auto': false, // whether to automatically upload the selected file. We recommend that you disable 'multi ': True, // Multifile upload must be enabled. // The server script 'script': 'uploadiify. action ', // The Action path for processing upload under struts2: 'scriptdata': {'userid': '000000', 'username': 'Alex ni '}, // The data that your business needs to pass to the server // the data that is passed to the server parameter 'folder': '/upload', // directory of the file to be uploaded, pass it as the 'folder' parameter to the server 'filedataname': 'photo', // It determines the two most important upload parameter names, in this example, the file 'photo' and the file name 'photofilename ''fileext ':'*. GID ;*. JPG ;*. JPEG ', // The allowed file type. Restrict the user's file selection on the client and pass it as the 'fileext' parameter to the server for verification. // other 'filedesc ': '*. GIF ;*. JPG ;*. JPEG ', // display 'sizelimmit' in the file type drop-down box of the local Select File Dialog Box ': 100*1024 // maximum size of a single file (in bytes)}); function uploadfile () {// Upload File jquery ('# file_upload '). uploadifyupload ();}

Java

The code is not listed here. It only describes the general process of the server uploadifyaction program:

Define the following variables and generate their get and set methods

    private File photo;    private String photoFileName,fileext,folder;

1) analyze 'fileext 'and break down all allowed file types;

2) Check whether photofilename is in the allowed file type

3) check whether the File Photo size exceeds the standard (unfortunately, uploadify will not pass the 'sizelimmit 'defined in JS to the server, and the server must define it as needed)

4) check whether the path specified by folder is valid

5) save the file photo in the path specified by folder. You may need to name it based on your business needs, instead of using the original file name photofilename.

6) return information for successful or failed write to response for use on the page

Note: If you trust the file type and size constraints of the browser, steps 2nd, 3rd, and 4th can also be omitted. However, to prevent malicious client camouflage, it is best not to omit them.

 Several other uploadify options worth using

'Removecompleted': false // whether to automatically clear the file list on the webpage after the upload is completed

'Displaydata': 'centage', // there are two options: Speed and percentage. One is the display speed, and the other is the display completion percentage.

'Buttonimg ':'/images/mybutton.jpg '. You can use an image to replace the English text displayed in the upload button on the page. This avoids Encoding Problems When you replace the image with a Chinese text.

Solved the default uploadify Prompt window.

Edit jquery. uploadify. v2.1.4.min. JS, find the 'alert 'and 'Confirm' calls, and change the prompt information from English to Chinese.

Uploadify is a plug-in for processing batch file uploads under the jquery framework. It supports multiple types of server software. Unfortunately, the Instructions on the official website (www.uploadify.com) are not well-developed, focusing on the configuration of the JS part, rather than detailed descriptions of the data interfaces on the server side. In addition, the data interaction with the server is encapsulated in the SWF file, and it is difficult to analyze from the source code.

1) Analysis

To explore the application interface data of uploadify under struts2, a mini tool program requestobserver is compiled as follows:

package utils;import java.util.Enumeration;import java.util.Iterator;import java.util.Map;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpSession;import com.opensymphony.xwork2.ognl.OgnlValueStack;public class RequestObserver {    private HttpServletRequest request;       public RequestObserver(HttpServletRequest request) {        this.request = request;    }       public void observe() {        String name,pvalue;        Object avalue;        Enumeration enum1;        System.out.println("/***************** Request Observer (Author: Alex Nie)**************/");               // observe Request Header        enum1 = request.getHeaderNames();        System.out.println("Request Header:");        while (enum1.hasMoreElements()) {            name = (String)enum1.nextElement();            pvalue = request.getHeader(name);            System.out.println("  " + name + " ---- " + pvalue);        }        enum1 = request.getParameterNames();        // observe Request Parameters        System.out.println("Request Parameters:");        while (enum1.hasMoreElements()) {            name = (String)enum1.nextElement();            pvalue = request.getParameter(name);            System.out.println("  " + name + " ---- " + pvalue);        }        enum1 = request.getAttributeNames();        // observe Request Attributes        System.out.println("Request Attributes:");        while (enum1.hasMoreElements()) {            name = (String)enum1.nextElement();            avalue = request.getAttribute(name);            System.out.println("  " + name + " ---- " + avalue);                       // observe OgnlValueStack bind by Struts 2            if (avalue instanceof OgnlValueStack) {                avalue = (OgnlValueStack)avalue;                Map<String,Object> m = ((OgnlValueStack) avalue).getContext();                System.out.println("  >> OgnlValueStack:");                Iterator it = m.keySet().iterator();                Object key;                while (it.hasNext()) {                    key = it.next();                    System.out.println ("        " + key + " ---- " + m.get(key));                }            }        }        // observe Request Session        HttpSession session = request.getSession(false);        System.out.println("session: " + session);        if (session!=null)        {            System.out.println("  sessionId: " + session.getId());            enum1 = session.getAttributeNames();            System.out.println("Session Attributes:");            while (enum1.hasMoreElements()) {                name = (String)enum1.nextElement();                avalue = session.getAttribute(name);                System.out.println("  " + name + " ---- " + avalue);            }        }        System.out.println("/***************** End of Request Observer (Author: Alex Nie)**************/");           }   }

After simple configuration according to the instructions on the official website, the file upload operation is triggered from the browser. After receiving the corresponding request in the action on the server side, the above tool program is used to output and analyze the data in the request, the results are as follows:

Analysis result

During batch file upload, uploadify initiates a server connection for each uploaded file.

During each connection, uploadify passes 7 parameters to the server, and four parameters of the string type are passed through request parameters.

Filename: the original name of the file to be uploaded. The content is the same as xxxxfilename.

Fileext: the file type that can be uploaded. It is specified by the fileext parameter specified in the client section JS Code.

Folder: The storage path of the uploaded file during the service period, which is specified by the folder parameter specified in the client section JS Code.

Upload: useless

Three parameters are passed through request attributes.

XXXX: file type, the content of the uploaded file. XXXX is specified by the filedataname parameter specified in the client section JS Code.

Xxxxfilename: string type, the original name of the uploaded file. XXXX is specified by the filedataname parameter specified in the client section JS Code. The content is the same as the aforementioned filename.
Uploadifycontenttype: useless

The above seven parameters are encapsulated by struts2 on the server side and can be directly used in actions. It should be noted that the parameter names are not exactly the same in case and in JS, and some are written in case on the server in JS, while others are the opposite. In addition, there are two parameters with the same content, which are about some improvements to uploadify in terms of code style and conventions in the future.

After clarifying the data interface, it is clear how to write the uploadify action under struts2. Next, we will take uploading photos in batches as an example.

2) Detailed Analysis

Html

<input id="file_upload" name="photo" type="file"/><div id="fileQueue"></div>

Javascript

Introduce jquery-1.4.2.min.js, swfobject. JS, jquery. uploadify. v2.1.4.min. js

Introduce your own upload JavaScript code as follows (simplified description ):

$ (Document ). ready (function () {$ ('# file_upload '). uploadify ({// page related 'upload': '/JS/uploadify/uploadify.swf', // The Built-in flash of the component. Adjust the 'cancelim' according to the actual path ': '/JS/uploadify/cancel.png', // cancel the Upload File button image 'queue id': 'filequeue ', // ID of the HTML element containing the uploaded file and upload progress: 'queuesizelimmit ': 10, // maximum number of files uploaded at a time // The control switch 'auto': false, // whether to automatically upload the selected file. We recommend that you disable 'multi ': True, // Multifile upload must be enabled. // The server script 'script': 'uploadiify. action ', // The Action path for processing upload under struts2: 'scriptdata': {'userid': '000000', 'username': 'Alex ni '}, // The data that your business needs to pass to the server // the data that is passed to the server parameter 'folder': '/upload', // directory of the file to be uploaded, pass it as the 'folder' parameter to the server 'filedataname': 'photo', // It determines the two most important upload parameter names, in this example, the file 'photo' and the file name 'photofilename ''fileext ':'*. GID ;*. JPG ;*. JPEG ', // The allowed file type. Restrict the user's file selection on the client and pass it as the 'fileext' parameter to the server for verification. // other 'filedesc ': '*. GIF ;*. JPG ;*. JPEG ', // display 'sizelimmit' in the file type drop-down box of the local Select File Dialog Box ': 100*1024 // maximum size of a single file (in bytes)}); function uploadfile () {// Upload File jquery ('# file_upload '). uploadifyupload ();}

Java

The code is not listed here. It only describes the general process of the server uploadifyaction program:

Define the following variables and generate their get and set methods

    private File photo;    private String photoFileName,fileext,folder;

1) analyze 'fileext 'and break down all allowed file types;

2) Check whether photofilename is in the allowed file type

3) check whether the File Photo size exceeds the standard (unfortunately, uploadify will not pass the 'sizelimmit 'defined in JS to the server, and the server must define it as needed)

4) check whether the path specified by folder is valid

5) save the file photo in the path specified by folder. You may need to name it based on your business needs, instead of using the original file name photofilename.

6) return information for successful or failed write to response for use on the page

Note: If you trust the file type and size constraints of the browser, steps 2nd, 3rd, and 4th can also be omitted. However, to prevent malicious client camouflage, it is best not to omit them.

 Several other uploadify options worth using

'Removecompleted': false // whether to automatically clear the file list on the webpage after the upload is completed

'Displaydata': 'centage', // there are two options: Speed and percentage. One is the display speed, and the other is the display completion percentage.

'Buttonimg ':'/images/mybutton.jpg '. You can use an image to replace the English text displayed in the upload button on the page. This avoids Encoding Problems When you replace the image with a Chinese text.

Solved the default uploadify Prompt window.

Edit jquery. uploadify. v2.1.4.min. JS, find the 'alert 'and 'Confirm' calls, and change the prompt information from English to Chinese.