jquery控件批量上传

先放上Uploadify的官网链接:http://www.uploadify.com/  -->里面可以看到PHP的示例,属性说明,以及控件下载地址。分flash版（免费）和html5版（收费）。

官网上可以看到效果演示。

另外在网上找到了一份Uploadify3.2的中文API文档，可以在我上传的资源里面下载。

下面就是一个基于springMVC的文件上传示例，看起来可能比文档更直观一些···

1.下载插件放到项目中

2.在jsp页面中引入以下JS和CSS

[javascript]  view plain  copy

 

1. <script type="text/javascript" src="${ctxStatic}/uploadify/jquery.uploadify.min.js"></script>  
2. <link type="text/css" rel="stylesheet" href="${ctxStatic}/uploadify/uploadify.css">  

3.jsp页面中创建展示DIV和操作按钮

[html]  view plain  copy

 

1. </pre><pre name="code" class="html"><form>  
2.     <div id="queue"></div><!-上传队列展示区-->  
3.     <input id="file_upload" name="file_upload" type="file" multiple="true"><!-批量上传按钮-->  
4. </form>  

4.编辑js代码

[html]  view plain  copy

 

1. $(document).ready(function() {  
2.     $("#file_upload").uploadify({  
3.         'swf' : '${ctxStatic}/uploadify/geo_fileUpload.swf',//控件flash文件位置  
4.                        //后台处理的请求（也就是action请求路径），后面追加了jsessionid，用来标示使用当前session（默认是打开新的session，会导致存在session校验的请求中产生302错误）  
5.                        'uploader' : '${ctx}/testFu;jsessionid=${pageContext.session.id}',  
6.         'queueID' : 'queue',//与下面HTML的div.id对应    
7.         'width' : '100',//按钮宽度  
8.         'height' : '32',//按钮高度  
9.         'fileTypeDesc' : '指定类型文件',  
10.         'fileTypeExts' : '*.jpg;*.png', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc   
11.         'fileObjName' : 'myTestFile',//文件对象名称,用于后台获取文件对象时使用,详见下面的java代码  
12.         'buttonText' : '批量上传',//上传按钮显示内容，还有个属性可以设置按钮的背景图片  
13.         'fileSizeLimit' : '100KB',  
14.         'multi' : true,  
15.         'overrideEvents' : [ 'onDialogClose', 'onUploadSuccess', 'onUploadError', 'onSelectError' ],//重写默认方法  
16.         'onFallback' : function() {//检测FLASH失败调用  
17.             alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");  
18.         },  
19.                        //以下方法是对应overrideEvents的重载方法，具体实现是网上找到的一个别的朋友的代码，  
20.                        //我把这些方法抽到了一个自定义js中，我会在最后面贴出来  
21.                        'onSelect' : uploadify_onSelect,  
22.         'onSelectError' : uploadify_onSelectError,  
23.         'onUploadError' : uploadify_onUploadError,  
24.         'onUploadSuccess' : uploadify_onUploadSuccess  
25.     });  
26. });  

5.controller类的方法

[java]  view plain  copy

 

1. <pre name="code" class="html">    @ResponseBody  
2.     @RequestMapping(value = "testFu")  

[html]  view plain  copy

 

1.        //这里的<span style="font-family: Arial, Helvetica, sans-serif;">creativeFile与上面jsp空间中的</span><span style="font-family: Arial, Helvetica, sans-serif;">creativeFile对应</span><span style="font-family: Arial, Helvetica, sans-serif;">  
2. lt;/span>    public String testUpload(MultipartFile creativeFile, HttpServletResponse response) {  
3.     System.out.println(creativeFile.getName());  
4.     System.out.println(creativeFile.getOriginalFilename());  
5.     System.out.println(creativeFile.getSize());  
6.     return "测试测试";// 返回给前台的提示信息  
7. }  

6.附录摘自网上的重载方法列表，我做了一些改动使之更实用（感谢网络无名高手）

[javascript]  view plain  copy

 

1. var uploadify_onSelectError = function(file, errorCode, errorMsg) {  
2.     var msgText = "上传失败\n";  
3.     switch (errorCode) {  
4.     case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:  
5.         // this.queueData.errorMsg = "每次最多上传 " +  
6.         // this.settings.queueSizeLimit + "个文件";  
7.         msgText += "上传的文件数量已经超出系统限制的" + $('#file_upload').uploadify('settings', 'queueSizeLimit') + "个文件！";  
8.         break;  
9.     case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:  
10.         msgText += "文件 [" + file.name + "] 大小超出系统限制的" + $('#file_upload').uploadify('settings', 'fileSizeLimit') + "大小！";  
11.         break;  
12.     case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:  
13.         msgText += "文件大小为0";  
14.         break;  
15.     case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:  
16.         msgText += "文件格式不正确，仅限 " + this.settings.fileTypeExts;  
17.         break;  
18.     default:  
19.         msgText += "错误代码：" + errorCode + "\n" + errorMsg;  
20.     }  
21.     alert(msgText);  
22. };  
23.   
24. var uploadify_onUploadError = function(file, errorCode, errorMsg, errorString) {  
25.     // 手工取消不弹出提示  
26.     if (errorCode == SWFUpload.UPLOAD_ERROR.FILE_CANCELLED || errorCode == SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED) {  
27.         return;  
28.     }  
29.     var msgText = "上传失败\n";  
30.     switch (errorCode) {  
31.     case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:  
32.         msgText += "HTTP 错误\n" + errorMsg;  
33.         break;  
34.     case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:  
35.         msgText += "上传文件丢失，请重新上传";  
36.         break;  
37.     case SWFUpload.UPLOAD_ERROR.IO_ERROR:  
38.         msgText += "IO错误";  
39.         break;  
40.     case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:  
41.         msgText += "安全性错误\n" + errorMsg;  
42.         break;  
43.     case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:  
44.         msgText += "每次最多上传 " + this.settings.uploadLimit + "个";  
45.         break;  
46.     case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:  
47.         msgText += errorMsg;  
48.         break;  
49.     case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND:  
50.         msgText += "找不到指定文件，请重新操作";  
51.         break;  
52.     case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:  
53.         msgText += "参数错误";  
54.         break;  
55.     default:  
56.         msgText += "文件:" + file.name + "\n错误码:" + errorCode + "\n" + errorMsg + "\n" + errorString;  
57.     }  
58.     alert(msgText);  
59. }  
60.   
61. var uploadify_onSelect = function() {  
62.   
63. };  
64.   
65. var uploadify_onUploadSuccess = function(file, data, response) {  
66.     alert("保存每个文件上传后台返回的相关信息,在onQueueComplete方法中展示");  
67. };  
68.   
69. var uploadify_onQueueComplete = function(){  
70.     alert("全部完成-->并展示提示信息");  
71. }  

到此Uploadify的文件批量上传就OK了。 有疑问可以留言咱们一起讨论。这个控件很简单花时间看的话都能弄懂。写这个文章的目的也是为了让大家更快上手，节省宝贵时间