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

最新推荐文章于 2024-08-23 16:53:34 发布

weixin_33681778

最新推荐文章于 2024-08-23 16:53:34 发布

阅读量91

点赞数

文章标签： python javascript php ViewUI

原文链接：https://my.oschina.net/u/1418088/blog/534969

版权

2019独角兽企业重金招聘Python工程师标准>>>

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和后台对应好

还有一点值得提的是，我感觉这个插件看似能上传多个，实际上后台还是一个一个接取的，并不是文件列表传过去，可能要自己后台用多线程实现吧！

转载于:https://my.oschina.net/u/1418088/blog/534969