java uploadify 3.2_jquery文件批量上传控件Uploadify3.2(java springMVC)

人比較懒  有用为主 不怎么排版了

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

官网上能够看到效果演示。

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

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

1.下载插件放到项目中

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

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

4.编辑js代码

$(document).ready(function() {

$("#file_upload").uploadify({

'swf' : '${ctxStatic}/uploadify/geo_fileUpload.swf',//控件flash文件位置

//后台处理的请求(也就是action请求路径)，后面追加了jsessionid，用来标示使用当前session(默认是打开新的session。会导致存在session校验的请求中产生302错误)

'uploader' : '${ctx}/testFu;jsessionid=${pageContext.session.id}',

'queueID' : 'queue',//与以下HTML的div.id相应

'width' : '100',//button宽度

'height' : '32',//button高度

'fileTypeDesc' : '指定类型文件',

'fileTypeExts' : '*.jpg;*.png', //控制可上传文件的扩展名，启用本项时需同一时候声明fileDesc

'fileObjName' : 'myTestFile',//文件对象名称,用于后台获取文件对象时使用,详见以下的java代码

'buttonText' : '批量上传',//上传button显示内容。还有个属性能够设置button的背景图片

'fileSizeLimit' : '100KB',

'multi' : true,

'overrideEvents' : [ 'onDialogClose', 'onUploadSuccess', 'onUploadError', 'onSelectError' ],//重写默认方法

'onFallback' : function() {//检測FLASH失败调用

alert("您未安装FLASH控件。无法上传图片！请安装FLASH控件后再试。

");

},

//以下方法是相应overrideEvents的重载方法，详细实现是网上找到的一个别的朋友的代码，

//我把这些方法抽到了一个自己定义js中。我会在最后面贴出来

'onSelect' : uploadify_onSelect,

'onSelectError' : uploadify_onSelectError,

'onUploadError' : uploadify_onUploadError,

'onUploadSuccess' : uploadify_onUploadSuccess

});

});

5.controller类的方法

@ResponseBody

@RequestMapping(value = "testFu")//这里的creativeFile与上面jsp空间中的creativeFile相应

public String testUpload(MultipartFile creativeFile, HttpServletResponse response) {

System.out.println(creativeFile.getName());

System.out.println(creativeFile.getOriginalFilename());

System.out.println(creativeFile.getSize());

return "測试測试";// 返回给前台的提示信息

}

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

var uploadify_onSelectError = function(file, errorCode, errorMsg) {

var msgText = "上传失败\n";

switch (errorCode) {

case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:

// this.queueData.errorMsg = "每次最多上传 " +

// this.settings.queueSizeLimit + "个文件";

msgText += "上传的文件数量已经超出系统限制的" + $('#file_upload').uploadify('settings', 'queueSizeLimit') + "个文件！";

break;

case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:

msgText += "文件 [" + file.name + "] 大小超出系统限制的" + $('#file_upload').uploadify('settings', 'fileSizeLimit') + "大小。";

break;

case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:

msgText += "文件大小为0";

break;

case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:

msgText += "文件格式不对，仅限 " + this.settings.fileTypeExts;

break;

default:

msgText += "错误代码：" + errorCode + "\n" + errorMsg;

}

alert(msgText);

};

var uploadify_onUploadError = function(file, errorCode, errorMsg, errorString) {

// 手工取消不弹出提示

if (errorCode == SWFUpload.UPLOAD_ERROR.FILE_CANCELLED || errorCode == SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED) {

return;

}

var msgText = "上传失败\n";

switch (errorCode) {

case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:

msgText += "HTTP 错误\n" + errorMsg;

break;

case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:

msgText += "上传文件丢失，请又一次上传";

break;

case SWFUpload.UPLOAD_ERROR.IO_ERROR:

msgText += "IO错误";

break;

case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:

msgText += "安全性错误\n" + errorMsg;

break;

case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:

msgText += "每次最多上传 " + this.settings.uploadLimit + "个";

break;

case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:

msgText += errorMsg;

break;

case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND:

msgText += "找不到指定文件。请又一次操作";

break;

case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:

msgText += "參数错误";

break;

default:

msgText += "文件:" + file.name + "\n错误码:" + errorCode + "\n" + errorMsg + "\n" + errorString;

}

alert(msgText);

}

var uploadify_onSelect = function() {

};

var uploadify_onUploadSuccess = function(file, data, response) {

alert("保存每一个文件上传后台返回的相关信息,在onQueueComplete方法中展示");

};

var uploadify_onQueueComplete = function(){

alert("所有完毕-->并展示提示信息");

}

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