java版-JQuery上传插件Uploadify使用实例

运行效果：

包结构图：

 

后台JAVA逻辑：

Java代码  

1. package com.bijian.study;  
2.   
3. import java.io.File;  
4. import java.io.IOException;  
5. import java.util.Iterator;  
6. import java.util.List;  
7. import java.util.UUID;  
8.   
9. import javax.servlet.ServletException;  
10. import javax.servlet.http.HttpServlet;  
11. import javax.servlet.http.HttpServletRequest;  
12. import javax.servlet.http.HttpServletResponse;  
13.   
14. import org.apache.commons.fileupload.FileItem;  
15. import org.apache.commons.fileupload.FileUploadException;  
16. import org.apache.commons.fileupload.disk.DiskFileItemFactory;  
17. import org.apache.commons.fileupload.servlet.ServletFileUpload;  
18.   
19. @SuppressWarnings("serial")  
20. public class Upload extends HttpServlet {  
21.   
22.     @SuppressWarnings("unchecked")  
23.     public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
24.   
25.         String savePath = this.getServletConfig().getServletContext().getRealPath("");  
26.         savePath = savePath + "/uploads/";  
27.   
28.         File f1 = new File(savePath);  
29.         System.out.println(savePath);  
30.         if (!f1.exists()) {  
31.             f1.mkdirs();  
32.         }  
33.         DiskFileItemFactory fac = new DiskFileItemFactory();  
34.         ServletFileUpload upload = new ServletFileUpload(fac);  
35.         upload.setHeaderEncoding("utf-8");  
36.         List fileList = null;  
37.         try {  
38.             fileList = upload.parseRequest(request);  
39.         } catch (FileUploadException ex) {  
40.             return;  
41.         }  
42.         Iterator<FileItem> it = fileList.iterator();  
43.         String name = "";  
44.         String extName = "";  
45.         while (it.hasNext()) {  
46.             FileItem item = it.next();  
47.             if (!item.isFormField()) {  
48.                 name = item.getName();  
49.                 long size = item.getSize();  
50.                 String type = item.getContentType();  
51.                 System.out.println(size + " " + type);  
52.                 if (name == null || name.trim().equals("")) {  
53.                     continue;  
54.                 }  
55.                 // 扩展名格式：  
56.                 if (name.lastIndexOf(".") >= 0) {  
57.                     extName = name.substring(name.lastIndexOf("."));  
58.                 }  
59.                 File file = null;  
60.                 do {  
61.                     // 生成文件名：  
62.                     name = UUID.randomUUID().toString();  
63.                     file = new File(savePath + name + extName);  
64.                 } while (file.exists());  
65.                 File saveFile = new File(savePath + name + extName);  
66.                 try {  
67.                     item.write(saveFile);  
68.                 } catch (Exception e) {  
69.                     e.printStackTrace();  
70.                 }  
71.             }  
72.         }  
73.         response.getWriter().print(name + extName);  
74.     }  
75. }  

 

web.xml：

Xml代码  

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"  
3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
4.     xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee  
5.     http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">  
6.       
7.   <servlet>  
8.     <servlet-name>upload</servlet-name>  
9.     <servlet-class>com.bijian.study.Upload</servlet-class>  
10.   </servlet>  
11.    
12.   <servlet-mapping>  
13.     <servlet-name>upload</servlet-name>  
14.     <url-pattern>/servlet/Upload</url-pattern>  
15.   </servlet-mapping>  
16.    
17.   <welcome-file-list>  
18.     <welcome-file>index.jsp</welcome-file>  
19.   </welcome-file-list>  
20. </web-app>  

 

index.jsp：

Jsp代码  

1. <%@ page language="java" contentType="text/html; charset=utf-8"%>  
2. <%  
3.     String path = request.getContextPath();  
4.     String basePath = request.getScheme() + "://"  
5.             + request.getServerName() + ":" + request.getServerPort()  
6.             + path + "/";  
7. %>  
8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
9. <html>  
10. <head>  
11. <base href="<%=basePath%>">  
12. <title>Upload</title>  
13.    
14. <!--装载文件-->  
15. <link href="css/uploadify.css" rel="stylesheet" type="text/css" />  
16. <script type="text/javascript" src="uploadify/jquery-1.9.1.js"></script>  
17. <script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script>  
18.   
19. <!--ready事件-->  
20. <script type="text/javascript">  
21.     $(document).ready(function() {  
22.         $("#uploadify").uploadify({  
23.             'uploader' : 'servlet/Upload',  
24.             'swf' : 'uploadify/uploadify.swf',  
25.             'cancelImg' : 'img/uploadify-cancel.png',  
26.             'folder' : 'uploads',//您想将文件保存到的路径  
27.             'queueID' : 'fileQueue',//与下面的id对应  
28.             'queueSizeLimit' : 5,  
29.             'fileDesc' : 'rar文件或zip文件',  
30.             'fileExt' : '*.rar;*.zip', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc  
31.             'auto' : false,  
32.             'multi' : true,  
33.             'simUploadLimit' : 2,  
34.             'buttonText' : '选择文件',  
35.             'onDialogOpen' : function() {//当选择文件对话框打开时触发  
36.                 alert( 'Open!');  
37.             },  
38.             'onSelect' : function(file) {//当每个文件添加至队列后触发  
39.                 alert( 'id: ' + file.id  
40.                         + ' - 索引: ' + file.index  
41.                         + ' - 文件名: ' + file.name  
42.                         + ' - 文件大小: ' + file.size  
43.                         + ' - 类型: ' + file.type  
44.                         + ' - 创建日期: ' + file.creationdate  
45.                         + ' - 修改日期: ' + file.modificationdate  
46.                         + ' - 文件状态: ' + file.filestatus);  
47.             },  
48.             'onSelectError' : function(file,errorCode,errorMsg) {//当文件选定发生错误时触发  
49.                 alert( 'id: ' + file.id  
50.                     + ' - 索引: ' + file.index  
51.                     + ' - 文件名: ' + file.name  
52.                     + ' - 文件大小: ' + file.size  
53.                     + ' - 类型: ' + file.type  
54.                     + ' - 创建日期: ' + file.creationdate  
55.                     + ' - 修改日期: ' + file.modificationdate  
56.                     + ' - 文件状态: ' + file.filestatus  
57.                     + ' - 错误代码: ' + errorCode  
58.                     + ' - 错误信息: ' + errorMsg);  
59.             },  
60.             'onDialogClose' : function(swfuploadifyQueue) {//当文件选择对话框关闭时触发  
61.                 if( swfuploadifyQueue.filesErrored > 0 ){  
62.                     alert( '添加至队列时有'  
63.                         +swfuploadifyQueue.filesErrored  
64.                         +'个文件发生错误n'  
65.                         +'错误信息:'  
66.                         +swfuploadifyQueue.errorMsg  
67.                         +'n选定的文件数:'  
68.                         +swfuploadifyQueue.filesSelected  
69.                         +'n成功添加至队列的文件数:'  
70.                         +swfuploadifyQueue.filesQueued  
71.                         +'n队列中的总文件数量:'  
72.                         +swfuploadifyQueue.queueLength);  
73.                 }  
74.             },  
75.             'onQueueComplete' : function(stats) {//当队列中的所有文件全部完成上传时触发  
76.                 alert( '成功上传的文件数: ' + stats.successful_uploads  
77.                     + ' - 上传出错的文件数: ' + stats.upload_errors  
78.                     + ' - 取消上传的文件数: ' + stats.upload_cancelled  
79.                     + ' - 出错的文件数' + stats.queue_errors);  
80.             },  
81.             'onUploadComplete' : function(file,swfuploadifyQueue) {//队列中的每个文件上传完成时触发一次  
82.                 alert( 'id: ' + file.id  
83.                     + ' - 索引: ' + file.index  
84.                     + ' - 文件名: ' + file.name  
85.                     + ' - 文件大小: ' + file.size  
86.                     + ' - 类型: ' + file.type  
87.                     + ' - 创建日期: ' + file.creationdate  
88.                     + ' - 修改日期: ' + file.modificationdate  
89.                     + ' - 文件状态: ' + file.filestatus);  
90.             },  
91.             'onUploadError' : function(file,errorCode,errorMsg,errorString,swfuploadifyQueue) {//上传文件出错是触发（每个出错文件触发一次）  
92.                 alert( 'id: ' + file.id  
93.                     + ' - 索引: ' + file.index  
94.                     + ' - 文件名: ' + file.name  
95.                     + ' - 文件大小: ' + file.size  
96.                     + ' - 类型: ' + file.type  
97.                     + ' - 创建日期: ' + file.creationdate  
98.                     + ' - 修改日期: ' + file.modificationdate  
99.                     + ' - 文件状态: ' + file.filestatus  
100.                     + ' - 错误代码: ' + errorCode  
101.                     + ' - 错误描述: ' + errorMsg  
102.                     + ' - 简要错误描述: ' + errorString);  
103.             },  
104.             'onUploadProgress' : function(file,fileBytesLoaded,fileTotalBytes,queueBytesLoaded,swfuploadifyQueueUploadSize) {//上传进度发生变更时触发  
105.                 alert( 'id: ' + file.id  
106.                     + ' - 索引: ' + file.index  
107.                     + ' - 文件名: ' + file.name  
108.                     + ' - 文件大小: ' + file.size  
109.                     + ' - 类型: ' + file.type  
110.                     + ' - 创建日期: ' + file.creationdate  
111.                     + ' - 修改日期: ' + file.modificationdate  
112.                     + ' - 文件状态: ' + file.filestatus  
113.                     + ' - 当前文件已上传: ' + fileBytesLoaded  
114.                     + ' - 当前文件大小: ' + fileTotalBytes  
115.                     + ' - 队列已上传: ' + queueBytesLoaded  
116.                     + ' - 队列大小: ' + swfuploadifyQueueUploadSize);  
117.             },  
118.             'onUploadStart': function(file) {//上传开始时触发（每个文件触发一次）  
119.                 alert( 'id: ' + file.id  
120.                     + ' - 索引: ' + file.index  
121.                     + ' - 文件名: ' + file.name  
122.                     + ' - 文件大小: ' + file.size  
123.                     + ' - 类型: ' + file.type  
124.                     + ' - 创建日期: ' + file.creationdate  
125.                     + ' - 修改日期: ' + file.modificationdate  
126.                     + ' - 文件状态: ' + file.filestatus );  
127.             },  
128.             'onUploadSuccess' : function(file,data,response) {//上传完成时触发（每个文件触发一次）  
129.                 alert( 'id: ' + file.id  
130.                     + ' - 索引: ' + file.index  
131.                     + ' - 文件名: ' + file.name  
132.                     + ' - 文件大小: ' + file.size  
133.                     + ' - 类型: ' + file.type  
134.                     + ' - 创建日期: ' + file.creationdate  
135.                     + ' - 修改日期: ' + file.modificationdate  
136.                     + ' - 文件状态: ' + file.filestatus  
137.                     + ' - 服务器端消息: ' + data  
138.                     + ' - 是否上传成功: ' + response);  
139.             }  
140.         });  
141.     });  
142. </script>  
143. </head>  
144.    
145. <body>  
146.     <div id="fileQueue"></div>  
147.     <input type="file" name="uploadify" id="uploadify" />  
148.     <p>  
149.         <!-- 上传第一个未上传的文件 -->  
150.         <a href="javascript:$('#uploadify').uploadify('upload')">上传</a>  
151.         <!-- 取消第一个未取消的文件 -->  
152.         <a href="javascript:$('#uploadify').uploadify('cancel')">取消上传</a>  
153.           
154.         <a href="javascript:$('#uploadify').uploadify('upload','*')">开始上传所有文件</a>&nbsp;  
155.         <a href="javascript:$('#uploadify').uploadify('cancel','*')">取消所有上传</a>  
156.     </p>  
157. </body>  
158. </html>  

 

附：

JQuery uploadify官方下载 http://www.uploadify.com/download/

JQuery uploadify官方文档 http://www.uploadify.com/documentation/

JQuery uploadify官方演示 http://www.uploadify.com/demos/