无刷新文件上传之三:多文件上传--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的形式。

 

 

 

 

你可能感兴趣的:(swfupload)