This article is the source code of the jQuery + SWFUpload + COS Upload plug-in. It uses jquery1.4, SWFUpload2.2, and COS to create the jquery Upload plug-in.
1. Introduce necessary js files and css files:
| The code is as follows: |
Copy code |
<! -- Introduce the jquery plug-in. Other versions can also -->
<Script type = "text/javascript" src = "jquery-1.4.2.min.js"> </script>
<! -- Jquery plug-in vinSwfUpload js -->
<Script type = "text/javascript" src = "vinSWFUpload-1.2.js"> </script>
<! -- SwfUpload core js -->
<Script type = "text/javascript" src = "core/SWFUpload-2.2.js"> </script>
<! -- Core css of jquery plugin vinSwfUpload -->
<Link href = "css/vinSwfUpload-1.2.css" rel = "stylesheet" type = "text/css"/>
<! -- Jquery plugin vinSwfUpload skin css -->
<Link href = "css/vinSwfUpload-1.2-skin.css" rel = "stylesheet" type = "text/css"/> |
2. Add the Component Display target to the body:
| The code is as follows: |
Copy code |
<Div id = "vinEdit"> </div> |
3. Initialize the plug-in:
| The code is as follows: |
Copy code |
<Script type = "text/javascript">
$ (Function (){
Var path = "<% = path %>/vinSwfUpload-1.2 /";
Var upload = $ ("# vinEdit"). vinSWFUpload ({
UploadURL: '<% = path %>/swf/upload ',
Width: 500,
Heigth: 300,
SizeUnit: "M ",
Skin: "green ",
AutoRemoveStoped: false,
FlashURL: path + "core/SWFUpload.swf ",
AddImgURl: path + "images/add.gif ",
UploadImgURl: path + "/images/upload.png ",
StopImgURl: path + "images/stop.png ",
DeleteImgURl: path + "images/trash.gif ",
TipImgURl: path + "images/tip.gif"
});
});
</Script> |
4. Required Upload classes:
| The code is as follows: |
Copy code |
DefaultFileRenamePolicy rename = generateFileRenamePolicy ();
MultipartRequest multi = null;
Try {
Multi = new MultipartRequest (request, parameters. getSaveDirectory (), parameters. getMaxPostSize (), parameters. getEncoding (), rename );
RenderJson (response, Constant. UPLOAD_SUCCESS );
} Catch (IOException e ){
If (! BlankUtil. isBlank (e. getMessage ())){
Int index = e. getMessage (). indexOf ("Posted content length ");
If (index>-1 ){
RenderJson (response, Constant. FILE_OVERSETSIZE );
} Else {
If (e instanceof IOException ){
RenderJson (response, Constant. IO_ERROR );
} Else {
RenderJson (response, Constant. UPLOAD_FAILED );
}
}
Logger. error (e. getMessage (), e. getCause ());
} Else {
Logger.info ("--- file Upload failed ---");
DeleteErrorFile (parameters. getSaveDirectory () + rename. getFileSaveName ());
}
Return;
} |
5. Configure the upload class in web. xml
| The code is as follows: |
Copy code |
<Servlet>
<Servlet-name> swfUploader </servlet-name>
<Servlet-class> com.upload.swf. SwfUploadServlet </servlet-class>
<! -- Maximum size of uploaded files, in MB -->
<Init-param>
<Param-name> FILE_SIZE_LIMIT </param-name>
<Param-value> 10 </param-value>
</Init-param>
<! -- Maximum number of files uploaded at a time -->
<Init-param>
<Param-name> FILE_COUNT_LIMIT </param-name>
<Param-value> 10 </param-value>
</Init-param>
<! -- Request response encoding format -->
<Init-param>
<Param-name> ENCODING </param-name>
<Param-value> UTF-8 </param-value>
</Init-param>
<! -- Whether to use a custom directory -->
<Init-param>
<Param-name> USE_CUSTOMDIR </param-name>
<Param-value> false </param-value>
</Init-param>
<! -- Custom file storage directory -->
<Init-param>
<Param-name> ROOT_UPLOADDIR </param-name>
<Param-value> rootUpload </param-value>
</Init-param>
</Servlet>
<Servlet-mapping>
<Servlet-name> swfUploader </servlet-name>
<Url-pattern>/swf/upload </url-pattern>
</Servlet-mapping> |
If everything goes well, you will see the following running effect chart
