jquery.uploadify.3.2.1 试用在IE9,IE10中 上传文件的按钮会无法点击
2015-10-12 18:16
786 查看
以前用的是版本2.1.4,这次看见更新后就尝试了一下,发现有很多改变。
首先引入 js 和 css
<link rel="stylesheet" href="uploadify.css" />
<script src="jquery.uploadify.js"></script>
当然jquery 是必不可少的
接下来是代码:
[javascript] view
plaincopy
//文件上传
$(function() {
$("#uploadify").uploadify({
'auto' : false,
'method' : "post",
'height' : '20',
'width' : '100',
'swf' : 'uploadify.swf',
'uploader' : '<%=basePath%>/contract/fileUpload.action',
'fileTypeDesc' : '格式:txt,xls,xlsx,doc,docx', //描述
'fileTypeExts' : '*.txt;*.xls;*.xlsx;*.doc;*.docx;*.zip', //文件类型
'fileSizeLimit' : '10000KB', //文件大小
'buttonText' : '选择文件', //按钮名称
'fileObjName' :'uploadify',
'successTimeout' : '5',
'requeueErrors' : false,
'removeTimeout' : '1',
'removeCompleted' : true,
'onUploadSuccess' : function(file, data, response){
var attach = eval('(' + data + ')');
$("#fileTable").show();
var addHtml = "<tr>"+
"<td class='t_l'>"+
"<a href='<%=basePath%>/attach/downloadAttach.action?attachId="+attach.id+"'>"+attach.filename+"."+attach.fileextname+"</a>"+
"</td>"+
"<td class='t_r'>"+attach.filesize+"</td>"+
"<td class='t_c'>"+attach.uploaddate+"</td>"+
"<td class='t_c'><a href='<%=basePath%>/attach/downloadAttach.action?attachId="+attach.id+"' id='"+attach.id+"'>下载</a></td>"+
"<td class='t_c'><a href='#' onclick='removeFile(this)' id='"+attach.id+"' name='attach_id'>取消</a></td>"+
"</tr>";
$("#fileBody").append(addHtml);
}
});
});
其中 onUploadSuccess为成功上传后的回调函数 file 为上传的文件,可通过file.name 获取文件名 size 可获取大小
data 为后台reponse输出的字符串,上例中输出的是 json 对象,故使用eval 进行转换
response 为 结果 true or false,具体可参考官方文档。
[javascript] view
plaincopy
<td colspan="3">
<input type="file" name="uploadify" id="uploadify" />
<input type="button" value="上传" onclick="$('#uploadify').uploadify('upload','*');">
<input type="button" value="取消" onclick="$('#uploadify').uploadify('stop');">
<table style="display: none;" id="fileTable">
<tbody style="width: 550px;border: solid;border-color: #D0D0D3;" id="fileBody">
<tr style="border: solid;border: #D0D0D3;">
<td width="200px;" class="t_c">文件名</td>
<td width="100px;" class="t_c">大小(k)</td>
<td width="150px;" class="t_c">上传时间</td>
<td width="100px;" class="t_c" colspan="2">操作</td>
</tr>
</tbody>
</table>
</td>
可以看到初始化中的很多属性都变化了,还包括上传操作的函数名称等等。
其次,还有一个问题,该控件在IE9中 上传文件的按钮会无法点击,初步查看可能是由于flash 的问题 引起,百度后发现 修改源码js 中的 classid即可。
具体可参考:
http://www.cnblogs.com/donhwa/archive/2011/06/23/ie9_swfupload_bug.html
解决此问题后的js替换文件下载
http://files.cnblogs.com/lostboy/jquery.uploadify3.1.fixed.js
或
http://download.csdn.net/detail/chenxiang199055/6003627
首先引入 js 和 css
<link rel="stylesheet" href="uploadify.css" />
<script src="jquery.uploadify.js"></script>
当然jquery 是必不可少的
接下来是代码:
[javascript] view
plaincopy
//文件上传
$(function() {
$("#uploadify").uploadify({
'auto' : false,
'method' : "post",
'height' : '20',
'width' : '100',
'swf' : 'uploadify.swf',
'uploader' : '<%=basePath%>/contract/fileUpload.action',
'fileTypeDesc' : '格式:txt,xls,xlsx,doc,docx', //描述
'fileTypeExts' : '*.txt;*.xls;*.xlsx;*.doc;*.docx;*.zip', //文件类型
'fileSizeLimit' : '10000KB', //文件大小
'buttonText' : '选择文件', //按钮名称
'fileObjName' :'uploadify',
'successTimeout' : '5',
'requeueErrors' : false,
'removeTimeout' : '1',
'removeCompleted' : true,
'onUploadSuccess' : function(file, data, response){
var attach = eval('(' + data + ')');
$("#fileTable").show();
var addHtml = "<tr>"+
"<td class='t_l'>"+
"<a href='<%=basePath%>/attach/downloadAttach.action?attachId="+attach.id+"'>"+attach.filename+"."+attach.fileextname+"</a>"+
"</td>"+
"<td class='t_r'>"+attach.filesize+"</td>"+
"<td class='t_c'>"+attach.uploaddate+"</td>"+
"<td class='t_c'><a href='<%=basePath%>/attach/downloadAttach.action?attachId="+attach.id+"' id='"+attach.id+"'>下载</a></td>"+
"<td class='t_c'><a href='#' onclick='removeFile(this)' id='"+attach.id+"' name='attach_id'>取消</a></td>"+
"</tr>";
$("#fileBody").append(addHtml);
}
});
});
其中 onUploadSuccess为成功上传后的回调函数 file 为上传的文件,可通过file.name 获取文件名 size 可获取大小
data 为后台reponse输出的字符串,上例中输出的是 json 对象,故使用eval 进行转换
response 为 结果 true or false,具体可参考官方文档。
[javascript] view
plaincopy
<td colspan="3">
<input type="file" name="uploadify" id="uploadify" />
<input type="button" value="上传" onclick="$('#uploadify').uploadify('upload','*');">
<input type="button" value="取消" onclick="$('#uploadify').uploadify('stop');">
<table style="display: none;" id="fileTable">
<tbody style="width: 550px;border: solid;border-color: #D0D0D3;" id="fileBody">
<tr style="border: solid;border: #D0D0D3;">
<td width="200px;" class="t_c">文件名</td>
<td width="100px;" class="t_c">大小(k)</td>
<td width="150px;" class="t_c">上传时间</td>
<td width="100px;" class="t_c" colspan="2">操作</td>
</tr>
</tbody>
</table>
</td>
可以看到初始化中的很多属性都变化了,还包括上传操作的函数名称等等。
其次,还有一个问题,该控件在IE9中 上传文件的按钮会无法点击,初步查看可能是由于flash 的问题 引起,百度后发现 修改源码js 中的 classid即可。
具体可参考:
http://www.cnblogs.com/donhwa/archive/2011/06/23/ie9_swfupload_bug.html
解决此问题后的js替换文件下载
http://files.cnblogs.com/lostboy/jquery.uploadify3.1.fixed.js
或
http://download.csdn.net/detail/chenxiang199055/6003627
相关文章推荐
- jQuery用noConflict代替$
- jQuery右键菜单插件 jQuery ContextMenu
- JQuery选择器大全
- jquery datepicker 设置只显示周一和周末
- jQuery扩展
- jQuery弹出窗口插件FancyBox用法教程
- JQuery中serialize()、serializeArray()和param()方法示例介绍
- jquery删除指定数组元素
- Jquery-validate自定义校验方法
- jQuery-Tab切换
- 如何使用css和jquery控制文章标题字数?
- Jquery下Ajax与PHP数据交换
- jquery filter() find()
- jQuery
- JQuery中$.ajax()方法参数详解
- 真正的LazyLoad按需加载
- jQuery $(document).ready()和JavaScript onload事件详解区别
- jquery validate 修改错误信息的显示位置
- 如何利用jQuery post传递含特殊字符的数据
- JS/jQuery常用代码片段