jquery uploadify文件上传插件用法精析
CreationTime--2018年8月2日11点12分
Author:Marydon
一、参数说明
1.参数设置
$("#file_upload").uploadify({
height : 30,//高度
swf : '/uploadify/uploadify.swf',//指定swf文件
uploader : '/uploadify/uploadify.do',//后台处理的url
width : 120,//宽度
buttonText: '上传图片', //按钮显示的文字
fileTypeExts: '*.*',//上传文件的类型,多个类型使用;分割'*.gif; *.jpg; *.png',默认值为：'*.*'
fileTypeDesc: 'Image Files',//这个属性值必须设置fileTypeExts属性后才有效，用来设置选择文件对话框中的提示文本,默认值为：All Files
formData: {'someKey':'someValue','someOtherKey':1},//发送给后台的其他参数通过formData指定
queueID: 'fileQueue',//可以为DOM元素的id,设置队列样式, 默认值为false,队列id动态生成，不带#
auto: true,//选择文件后自动上传，默认值为：true
multi: true,//设置为true将允许多文件上传，默认值为：true
buttonClass:'xttblog',//上传按钮的样式
buttonImage:'',//按钮的图片路径
buttonCursor:'hand',//鼠标指针悬停在按钮上的样子，默认值为：hand
checkExisting:'/uploadify/check-exists.do',//文件的路径，检查目标文件夹中是否已上载的文件的名称.如果文件名不存在,该脚本将返回1,如果文件名存在或0，默认值为false
debug:true,//打开swfupload调试模式，默认值为：false
fileObjName:'Filedata',//后台可以通过这个名字获取到文件对象,默认值为：Filedata
fileSizeLimit:'',//允许文件上传的最大大小.这个值可以是数字或字符串.如果它是一个字符串,它接受一个单位(B,KB,MB,GB)，默认单位为KB。值设置为0,表示要上传的文件大小无限制(单文件大小)
itemTemplate:'',//选择不同的HTML模板,添加上传文件到上传队列。主要有4种模板:instanceID(uploadify实例id)、fileID(文件id)、fileName(文件名字)、fileSize(文件大小).例如：${fileName}，默认值为：false
method:'POST',//POST或GET，默认值为post
overrideEvents:['onUploadProgress'],//重写事件,onUploadProgress进度条不更新，jsonArray,默认值为：空数组[]
preventCaching:true,//是否缓存,默认值为：true不缓存
progressData:'percentage',//进度条percentage百分百、speed上传速度更新,默认值为：percentage
queueSizeLimit:999,//队列大小，超过将触发onselecterror事件,和uploadLimit类似,默认值为：999
removeCompleted:true,//上传完成后是否删除上传队列，默认值为：true
removeTimeout:3,//上传完成后,延迟3秒删除队列，默认值为：3秒
requeueErrors:true,//如果为true上传失败后将继续尝试再次上传，默认值为：fasle
successTimeout:30,//文件上传成功后服务端应返回成功标志，此项设置返回结果的超时时间，默认值为：30秒
uploadLimit:999,//最大上传文件数量，如果达到或超出此限制将会触发onUploadError事件，默认值为：999
});
2.事件设置
$("#file_upload").uploadify({
onCancel : function(file) {
//移除文件时触发
},
onClearQueue:function(queueItemCount){
//当调用函数cancel方法且queueItemCount>1时才触发，queueItemCount参数为被取消上传的文件数量
},
onDestroy:function(queueItemCount){
//当destory方法被调用时触发
},
onDialogClose:function(queueData){
//当文件浏览框关闭时触发，如果将此事件被重写，则当向队列添加文件上传出错时不会弹出错误消息提示
//queueData对象包含如下属性：
//filesSelected 文件选择对话框*选择了多少个文件
//filesQueued 已经向队列中添加了多少个文件
//filesReplaced 已经向队列中替换了多少个文件
//filesCancelled 取消了多少个文件
//filesErrored 出错了多少个文件
},
onDialogOpen:function(){
//当文件选择对话框弹出时立即出发，但可能在文件选择对话框被关闭之前并不能全部执行
},
onDisable:function(){
//当disable方法禁用Uploadify上传按钮时被调用时触发
},
onEnable:function(){
//当disable方法启用Uploadify上传按钮时被调用时触发
},
onFallback:function(){
//当Uploadify初始化过程中检测到当前浏览器不支持flash时触发
alert("当前浏览器未安装或未启用flash插件，无法进行文件上传！");
},
onInit:function(){//首次初始化Uploadify结束时触发
},
onQueueComplete:function(queueData){
//文件上传队列处理完毕后触发,queueData对象包含如下属性：
//uploadsSuccessful上传成功的文件数量
//uploadsErrored上传失败的文件数量
},
onSelect:function(file){//选择文件后向队列中添加每个上传任务时都会触发
},
onSelectError:function(file, errorCode, errorMsg){
//选择文件后向队列中添加每个上传任务时如果失败都会触发
//file文件对象
//errorCode错误代码如下：
//QUEUE_LIMIT_EXCEEDED任务数量超出队列限制；
//FILE_EXCEEDS_SIZE_LIMIT文件大小超出限制；
//ZERO_BYTE_FILE文件大小为0
//INVALID_FILETYPE文件类型不符合要求
//errorMsg错误提示，可通过'this.queueData.errorMsg'定制
},
onSWFReady:function(){//Flash文件载入成功后触发
},
onUploadComplete:function(file){//每个文件上传完毕后无论成功与否都会触发
},
onUploadError:function(file, errorCode, errorMsg, errorString){
//文件上传出错时触发，参数由服务端程序返回
},
onUploadProgress:function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal){
//处理上传队列的过程中会多次触发此事件，每当任务状态有更新时都会触发
//file文件对象
//bytesUploaded已上传的字节数
//bytesTotal文件总字节数
//totalBytesUploaded当前任务队列中全部文件已上传的总字节数
//totalBytesTotal当前任务队列中全部文件的总字节数
},
onUploadStart:function(file){//当文件即将开始上传时立即触发
},
onUploadSuccess:function(file, data, response){
//当文件上传成功时触发
//file文件对象
//data服务端输出返回的信息，数据格式必须是字符串，否则接收不到
//response有输出时为true,如果无响应为false，如果返回的是false,当超过successTimeout设置的时间后假定为true
}
});
3.方法调用
cancel(fileID, suppressEvent)
用途：
取消队列中的任务，不管此任务是否已经开始上传
参数说明：
fileID要取消的文件ID，如果为空则取消队列中第一个任务，如果为'*'则取消所有任务
suppressEvent是否阻止触发onUploadCancel事件，当清空队列时非常实用
示例：
$('#file_upload').uploadify('cancel');// 取消第一个
$('#file_upload').uploadify('cancel','*');// 清空队列
destroy()
用途：
销毁Uploadify实例并将文件上传按钮恢复到原始状态
示例：
$('#file_upload').uploadify('destroy');// 销毁Uploadify实例
disable(setDisabled)
用途：
禁用或启用文件浏览按钮
参数说明：
setDisabled – 设置为true表示禁用，false为启用
示例：
$('#file_upload').uploadify('disable',true);// 禁用按钮
settings(name, value, resetObjects)
用途：
获取或设置Uploadify实例参数
参数说明：
name – 属性名称，如果只提供属性名称则表示获取其值
value – 属性值
resetObjects – 设置为true时，更新postData对象将清空现有的值。否则，新的值将被添加到其末尾
示例：
$('#file_upload').uploadify('settings','buttonText','BROWSE');// 将按钮参数的值改为BROWSE
$('#file_upload').uploadify('settings','buttonText'));// 获取到按钮参数的值
stop()
用途：
停止当前正在上传的任务
示例：
$('#file_upload').uploadify('stop');//停止上传
upload(fileID)
用途：
立即上传指定的文件，如果fileID为’*'表示上传所有文件，要指定上传多个文件，则将每个文件的fileID作为一个参数
示例：
$('#file_upload').uploadify('upload','*');// 开始上传所有文件
二、调用
第一步：页面随意设置一个id="file_upload"的html元素
<!-- 文件上传 -->
<div id="file_upload"></div>
说明：指定一个dom元素的id，该dom元素在uploadify初始化后会被Flash按钮代替，这个dom元素相当于一个占位符。
第二步：页面加载完毕后，绑定并设置参数
// 页面加载完毕后，才能获取到file_upload这个dom对象
$(function(){
$('#file_upload').uploadify({
// 参数配置
});
});
加载成功，页面元素展示
三、数据交互
1.前台如何传参？
方法一：get传参
方式一（正确方式）：通过onUploadStart实现（推荐使用）
$('#file_upload').uploadify({
'method', 'get',
'buttonText' : '添加文件',
'fileTypeExts' : '*.gif; *.jpg; *.png;*.pdf;*.zip;',// 文件类型限制
'fileTypeDesc' : '请选择gif jpg png pdf zip类型的文件',// 文件类型描述
'swf' : baseUrl + '/uploadify/flash/uploadify.swf',// flash插件
'uploader' : baseUrl + '/uploadFile.do',// 上传的文件请求处理
'onDialogClose' : function(queueData) {// 选择文件窗口关闭时，触发
},
'onUploadStart' : function(file){// 文件上传前，触发
// 请求参数：上传每个文件的同时提交到服务器的额外数据，中文需要编码
$('#file_upload').uploadify("settings","formData",{
'param1' : encodeURI('测试文件上传传参'),
'param2' : $('#aa').val()// 动态参数
});
},
'onUploadSuccess' : function(file, data, response) {// 上传成功
window.open(baseUrl + '/fileList.jsp');
},
'onUploadError' : function(file, errorCode, errorMsg, errorString) {// 上传失败
},
'onFallback' : function(){// 文件上传按钮加载失败
alert("当前浏览器未安装或未启用flash插件，无法进行文件上传！");
}
});
方式二（错误实现方式）：直接声明
直接声明 'formData' : {'param1': encodeURI('测试文件上传传参')},这种方式后台接收不到传递的参数。
方法二：post传参
方式一：通过onUploadStart实现（推荐使用）
$('#file_upload').uploadify({
'method', 'post',// 默认值为post，可以不声明
'buttonText' : '添加文件',
'fileTypeExts' : '*.gif; *.jpg; *.png;*.pdf;*.zip;',// 文件类型限制
'fileTypeDesc' : '请选择gif jpg png pdf zip类型的文件',// 文件类型描述
'swf' : baseUrl + '/uploadify/flash/uploadify.swf',// flash插件
'uploader' : baseUrl + '/uploadFile.do',// 上传的文件请求处理
'onDialogClose' : function(queueData) {// 选择文件窗口关闭时，触发
},
'onUploadStart' : function(file){// 文件上传前，触发
// 请求参数：上传每个文件的同时提交到服务器的额外数据，中文需要编码
$('#file_upload').uploadify("settings","formData",{
'param1' : encodeURI('测试文件上传传参'),
'param2' : $('#aa').val()// 动态参数
});
},
'onUploadSuccess' : function(file, data, response) {// 上传成功
window.open(baseUrl + '/fileList.jsp');
},
'onUploadError' : function(file, errorCode, errorMsg, errorString) {// 上传失败
},
'onFallback' : function(){// 文件上传按钮加载失败
alert("当前浏览器未安装或未启用flash插件，无法进行文件上传！");
}
});
方式二： 直接声明
'formData' : {'param1': encodeURI('测试文件上传传参')},
2.后台如何接收到参数？
方式一对应的接收参数的方法为：
// 通过指定onUploadStart()获取参数
String param1 = request.getParameter("param1");
// 解码
param1 = URLDecoder.decode(param1, "utf-8");
方式二对应的接收参数方法为：
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) {
// 通过设置formData获取参数
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletContext servletContext = this.getServletConfig().getServletContext();
File repository = (File) servletContext.getAttribute("javax.servlet.context.tempdir");
factory.setRepository(repository);
ServletFileUpload upload = new ServletFileUpload(factory);
try {
List<FileItem> items = upload.parseRequest(req);
// 7.对所有请求信息进行判断
Iterator<FileItem> iter = items.iterator();
while (iter.hasNext()) {
FileItem item = iter.next();
// form表单格式
if (item.isFormField()) {
String paramName = item.getFieldName();
if ("param1".equals(paramName)) {
String paramValue = item.getString();
// 解码
paramValue = URLDecoder.decode(paramValue, "utf-8");
System.out.println("参数名：" + paramName + "=" + paramValue);
}
} else {
// 文件格式处理 TODO
}
} } catch (Exception e) {
e.printStackTrace();
}
}
3.小结：
推荐使用第一种方式进行传参；
不管是get传参还是post传参，参数值为中文时，都需要先进行编码，否则后台接收到的数据乱码（比如：使用encodeURI()）；
不管在初始化的时候，定义的uploadify对象，定义的是post还是get，最终是以post方式进行提交的。
四、如何设置手动上传？
第一步：设置参数
'auto' : false,
第二步：页面设置按钮
<div id="ctrlUpload">
<a href="javascript:;" onclick="$('#file_upload').uploadify('upload', '*');" class="Button"
onmouseover="javascript:this.className='ButtonOver'" onmouseout="javascript:this.className='Button'">
上传所有
</a>
<a href="javascript:;" onclick="$('#file_upload').uploadify('cancel', '*');$('#ctrlUpload').hide();" class="Button"
onmouseover="javascript:this.className='ButtonOver'" onmouseout="javascript:this.className='Button'">
取消上传
</a>
</div>