您的位置:首页 > 产品设计 > UI/UE

关于多文件上传插件uploadify使用总结

2015-11-24 00:00 543 查看
uploadify官网:http://www.uploadify.com/

属性配置的话官网上的docs文档上有说明和使用例子,下面我贴出我的配置:

需要导入的js文件:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.min.js" ></script>
<script type="text/javascript" src="js/jquery.uploadify.js" ></script>

//uploadify.swf这个文件要用到,也请放到项目中

//放在ready中
$('#picupload').uploadify({
buttonText:"选择文件",
auto:false,
swf:"js/uploadify.swf",
successTimeout:60,
fileObjName:'uploadify',  //这里设置的值要跟后台接收的值一样,否则会报404找不到错误

//这里指向后台action,也可是是一个处理上传内容的php文件、jsp文件……等等
uploader:"goodsAction!update?id="+$('#id').val(),
fileTypeExts:'*.jpg;*.jpge;*.png;*.gif', //设置允许上传文件的类型
fileSizeLimit:'3MB',
queueSizeLimit:25,
onUploadProgress:function(){    //滚动条  可以自行设置,参考官网文档
},
onSelect:function(){   //选中文件后调用的函数
},
onSelectError:function(file, errorCode, errorMsg){
switch(errorCode){
case -100:
alert("上传的文件数量已经超出系统限制");
break;
case -110:
alert("文件 ["+file.name+"]的大小超出系统限制的"+
$('#file_upload').uploadify('settings','fileSizeLimit')+"值!");
break;
case -120:
alert("文件 ["+file.name+"] 大小异常!");
break;
case -130:
alert("文件 ["+file.name+"] 类型不正确!");
break;
}
},
onFallback:function(){
alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。");
},
onUploadSuccess:function(file, data, response){
alert("上传成功,请刷新页面!");
}
})

以下是我的简单实用:

<input type="file" name="picupload" id="picupload"/>
<input type="button" value="开始上传" onclick="javascript:$('#picupload').uploadify('upload', '*');"/>
<input type="button" value="停止上传" onclick="javascript:$('#picupload').uploadify('stop');"/>
<input type="button" value="清除队列" onclick="javascript:$('#picupload').uploadify('cancel', '*');"/>

后台上传文件代码就和别的上传一样了,关键是要把自己设置的fileObjName和后台对应好

还有一点值得提的是,我感觉这个插件看似能上传多个,实际上后台还是一个一个接取的,并不是文件列表传过去,可能要自己后台用多线程实现吧!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  uploadify query