无刷新文件上传之三：多文件上传--SwfUpload组件

 

 

swfupload的原理是使用flash来操作，从而完成多文件上传的。

先下载swfupload组件：https://code.google.com/p/swfupload/downloads/list，demo示例：http://demo.swfupload.org/v220/index.htm。

一份很好的说明文档：http://www.cnblogs.com/youring2/archive/2012/07/13/2590010.html。

 

我这里给出一个成功运行的例子，里面的参数和回调函数可以参考说明文档来理解。记得要引入swfupload的js：

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 <script type="text/javascript" src="swfupload/swfupload.js"></script>
 5 <script type="text/javascript" src="customer/jquery.js"></script>
 6 <title>Insert title here</title>
 7 </head>
 8 <body>
 9     <input type="button" id="upID" />
10     <input type="submit" value="上传" onclick="swf.startUpload()" />
11     <br />
12     <table border='1' id="filesTable" style="display: none;">
13         <tr>
14             <th>name</th>
15             <th>size</th>
16             <th>status</th>
17         </tr>
18     </table>
19     <script type="text/javascript">
20         var swf;
21         $(function() {
22             loadSwf();
23         });
24         var loadSwf = function() {
25             swf = new SWFUpload({
26                 button_image_url : 'swfupload/psb.jpg',//button的背景图片
27                 button_placeholder_id : 'upId',//button的显示按钮id
28                 button_width : 80,
29                 button_height : 18,
30                 button_text : '选择文件',//button文字
31                 flash_url : 'swfupload/swfupload.swf',//flash地址
32                 upload_url : '',//数据提交地址
33                 file_size_limit : "100", // 100K
34                 file_types : "*.jpg;*.gif;*.png", //文件类型
35                 //file_types_description : "*.jpg,*.png,*.gif",    //选择文件时的描述
36                 file_upload_limit : "4", //选择文件个数限制
37                 file_queue_limit : "4", //序列中文件限制
38                 upload_complete_handler : function() {//上传成功后调用，用此实现批量上传
39                     this.startUpload();
40                 },
41                 file_dialog_complete_handler : function() {//选择文件对话框关闭后发生
42                     $('#filesTable').show();
43                 },
44                 file_queued_handler : function(file) {//在file_dialog_complete_handler之前发生。所选文件进入上传序列，执行的次数取决于文件个数
45                     var table = $('#filesTable');
46                     var row = $("<tr id=''></tr>");
47                     row.attr('id', file.id);
48                     var col1 = $("<td>" + file.name + "</td>");
49                     var col2 = $("<td>" + file.size + "</td>");
50                     var col3 = $("<td>" + showStatus(file.filestatus)
51                             + "</td>");
52                     row.append(col1).append(col2).append(col3);
53                     table.append(row);
54                 },
55                 upload_progress_handler : function() {//上传中，修改状态
56                     $('#' + file.id + ' td:eq(1)').html(
57                             file.showStatus(file.filestatus));
58                 },
59                 upload_error_handler : function(file, errorCode, msg) {//上传失败，修改状态
60                     $('#' + file.id + ' td:eq(1)').html(
61                             file.showStatus(file.filestatus));
62                 },
63                 upload_success_handler : function(file, server_data,
64                         receivedResponse) {//上传成功，修改状态
65                     $('#' + file.id + ' td:eq(1)').html(
66                             file.showStatus(file.filestatus));
67                 },
68                 file_queue_error_handler : function(msg) {//文件不符合规则，加入序列失败时调用
69                     alert('请按照规则进行上传！');
70                 }
71             });
72         };
73         function showStatus(status) {
74             var word = '';
75             switch (status) {
76             case SWFUpload.FILE_STATUS.QUEUED:
77                 word = "等待";
78                 break;
79             case SWFUpload.FILE_STATUS.ERROR:
80                 word = "异常";
81                 break;
82             case SWFUpload.FILE_STATUS.COMPLETE:
83                 word = "成功";
84                 break;
85             case SWFUpload.FILE_STATUS.IN_PROGRESS:
86                 word = "上传中";
87                 break;
88             case SWFUpload.FILE_STATUS.CANCELLED:
89                 word = "取消上传";
90                 break;
91             }
92             return word;
93         }
94     </script>
95 </body>
96 </html>

 

在后台接受上传文件：

　　我使用的是Struct2 ，定义两个字段

1 private String Filedata;     //获得临时文件路径。
2 private String Filename;   //获得文件名

　　使用Filedata来构造File对象，Filename获取用户上传文件名。

 

swfupload的上传内部也是一个一个文件上传，所以struct2里面的方法会调用多次。

 

多一句：百度的UEditor其中的图片上传，也是使用flash的形式。

 

 

 

 

posted @ 2013-04-22 13:59  轩辕李  阅读(459)  评论(0)  编辑  收藏  举报