今天要使用一个功能,在网页上找了上传文档,因为后期要考录到上传视频和其他附件,网上找了半天还是 uploadify 最实用。
第一步先去官网下载sdk包 官网下载
添加对css和js文件的引用:先应用jquery
<link rel="stylesheet" type="text/css" href="__PUBLIC__/ext/uploadfty/uploadify.css"/>
<script type="text/javascript" src="__PUBLIC__/ext/uploadfty/jquery.uploadify.min.js"></script>注意jquery.js文件和uploadify.js文件的调用顺序
在页面总应用中引入这样的代码
$(function () { $("#uploadify").uploadify({ //指定swf文件 'swf': 'js/uploadify/uploadify.swf', //后台处理的页面 'uploader': 'UploadHandler.ashx', //按钮显示的文字 'buttonText': '上传图片', //显示的高度和宽度,默认 height 30;width 120 //'height': 15, //'width': 80, //上传文件的类型 默认为所有文件 'All Files' ; '*.*' //在浏览窗口底部的文件类型下拉菜单中显示的文本 'fileTypeDesc': 'Image Files', //允许上传的文件后缀 'fileTypeExts': '*.gif; *.jpg; *.png', //发送给后台的其他参数通过formData指定 //'formData': { 'someKey': 'someValue', 'someOtherKey': 1 }, //上传文件页面中,你想要用来作为文件队列的元素的id, 默认为false 自动生成, 不带# //'queueID': 'fileQueue', //选择文件后自动上传 'auto': true, //设置为true将允许多文件上传 'multi': true }); });
关于uploadfiy 的具体配置需要查看官网的配置
接下来就说一下关于uploadfiy 使用中的几个bug
IE 中 出现js 缺少对象错误
错误定位在jquery中
排查后发现是应用Jquery Validition 验证控件导致的,在Jquery Validition控件初始化中,有下面代码
$currentSection
.validateDelegate(":text, [type='password'], [type='file'], select, textarea, " +
"[type='number'], [type='search'] ,[type='tel'], [type='url'], " +
"[type='email'], [type='datetime'], [type='date'], [type='month'], " +
"[type='week'], [type='time'], [type='datetime-local'], " +
"[type='range'], [type='color'] ",
"focusin focusout keyup", delegate)
.validateDelegate("[type='radio'], [type='checkbox'], select, option", "click", delegate);
- 只要你将这段代码注释掉,错误就会消失
我尝试使用jQuery 1.9和1.12都依然存在这个问题。所以只将1.8.2的代码更改了,其它还有一处碰到object这个元素都会有这个问题。
更改后的jquery 1.8.2 下载:
这样关于IE伤的 .swf 不能加载的bug就算解决了,更换一下jquery