一、准备工作
1.1 文件上传插件:swfupload;
1.2 文件上传所需jar包:commons-fileupload-1.3.1.jar和commons-io-2.2.jar;
1.3 解析excel所需jar包:dom4j-1.6.1.jar,poi-3.8-20120326.jar,poi-ooxml-3.8-20120326.jar,poi-ooxml-schemas-3.8-20120326.jar和xmlbeans-2.3.0.jar
1.4目录结构
二、代码展示
2.1 客户端代码设计
JSP部分
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
3 <html>
4 <head>
5 <title>excel导入演示</title>
6 <%@ include file="commons/jsp/include.jsp" %>
7 <script type="text/javascript" src="<c:url value="/commons/js/swfupload/swfupload.js" />"></script>
8 <script type="text/javascript" src="index.js"></script>
9 </head>
10 <body>
11 <table>
12 <tbody>
13 <tr>
14 <td align="right">导入排班信息</td>
15 <td>
16 <input readonly/>
17 <input />
18 </td>
19 <td>
20 <span ></span>
21 <input onclick="readExcel();" type="button" value="导入"/>
22 </td>
23 </tr>
24 </tbody>
25 </table>
26 </body>
27 </html>
js文件
1 var uploadItem;
2 // 页面加载
3 $(function() {
4 // 必须是页面加载完毕后,再实例化该对象
5 uploadItem = new UploadItem();
6 });
7
8 /**
9 * 导入Excel
10 * @returns
11 */
12 function readExcel() {
13 var FILENAME = $("#saveFileName").val();// 上传文件
14 if(FILENAME == ""){
15 Dialog.Alert('消息提示',"请点击浏览按钮选择EXCEL文件!",null,null,100);
16 return;
17 }
18
19 var param = "FILENAME=" + FILENAME;//文件名字
20 $.ajax({
21 type : 'POST',
22 url : baseUrl + "/readExcel.do",
23 data : param,
24 success : function(result) {
25 var result = eval("(" + result + ")");
26 $get('FILENAME').value = "";
27 $get('saveFileName').value = "";
28 // 返回执行结果
29 var returnMsg = result.msg;
30 if ("数据导入成功!" != result.msg) {
31 returnMsg = result.expMsg;
32 }
33 alert(returnMsg);
34 }
35 });
36 }
37 /*
38 * SWFUpload 浏览按钮:上传文件到文件夹
39 */
40 function UploadItem() {
41 var object = this;
42
43 this.settings_object = {
44 flash_url : baseUrl + "/commons/js/swfupload/swfupload.swf",
45 upload_url : baseUrl + "/uploadExcel.do",
46 file_post_name : "uploadFile",
47 post_params:{"test":"测试参数传递"},
48 file_size_limit : "20 MB",
49 file_types : "*.xls;*.xlsx",
50 file_types_description : "excel File",
51 file_upload_limit : "0",
52
53 file_queued_handler : fileQueued,// 指定文件上传事件
54 upload_error_handler : uploadError,// 指定上传异常处理事件
55 file_queue_error_handler : fileQueueError,//文件上传校验事件异常处理
56 upload_success_handler : uploadSuccess,// 指定上传成功事件
57
58 button_image_url : baseUrl + "/commons/images/browser.gif",
59 button_placeholder_id : "ButtonPlaceholder",// 根据ID绑定浏览按钮及事件
60 button_width : 69,
61 button_height : 21,
62
63 debug : false
64 };
65
66 this.swfu = new SWFUpload(object.settings_object);
67
68 /**
69 * 开始上传
70 */
71 this.startUpload = function () {
72 object.swfu.startUpload();
73 };
74
75 }
76
77 function fileQueued(file) {
78 uploadItem.startUpload();
79 };
80
81 /**
82 * 上传成功
83 * @param file
84 * @param serverData
85 * @returns
86 */
87 function uploadSuccess(file, result) {
88 var result = eval("(" + result + ")");
89 $get("FILENAME").value = result.oldFileName;
90 $get("saveFileName").value = result.saveFileName;
91 }
92
93 function fileQueueError(file, errorCode, message) {
94 switch (errorCode) {
95 case -100:
96 message = "您上传的文件过大!";// QUEUE_LIMIT_EXCEEDED
97 break;
98 case -110:
99 message = "您上传的文件过大!";// FILE_EXCEEDS_SIZE_LIMIT
100 break;
101 case -120:
102 message = "您上传的文件类型不正确!";// ZERO_BYTE_FILE
103 break;
104 case -130:
105 message = "您上传的文件类型格式错误!";// INVALID_FILETYPE
106 break;
107 default:
108 break;
109 }
110
111 alert(result.msg);
112 $get('FILENAME').focus();
113 };
114
115 /**
116 * 上传失败
117 * @param file
118 * @param errorCode
119 * @returns
120 */
121 function uploadError(file, errorCode) {
122 var result = eval("(" + errorCode + ")");
123 alert(result.msg);
124 };