[js]uploadify结合jqueryUI弹出框上传,js中的冒出的bug,又被ie坑了
引言
最近在一个项目中,在用户列表中需要对给没有签名样本的个别用户上传签名的样本,就想到博客园中上传图片使用弹出框方式,博客园具体怎么实现的不知道,只是如果自己来弄,想到两个插件的结合使用,在弹出框中使用uploadify插件进行上传,每次都会报错很是无语,最后找到解决方案,这里记录一下,算是对工作中遇到的bug的一个总结。
bug
这是vs调试状态下,显示的信息。在浏览器端,点击第一次上传按钮,正常,将弹出框关闭后,第二次打开,就会出现问题:
第一次单击上传:
第二次,关闭弹出框,再次单击上传:
单击是:
try {
document.getElementById("SWFUpload_0").SetReturnValue(__flash__toXML(SWFUpload.instances["SWFUpload_0"].testExternalInterface()) );
}
catch (e) { document.getElementById("SWFUpload_0").SetReturnValue("<undefined/>"); }
F12
调试
就是这个问题,头疼啊,在其他浏览器正常,在ie下被坑死了。
没办法只能想办法解决啊。
这地方出现错误“null”为空或不是对象bug,猜测是找不到flash的id(SWFUpload_0)了,所以出现null,就会出现这个bug。
相关代码
head标签内的js,代码不再说明,写有注释:
<style type="text/css">
/*隐藏上传的进度条*/
.uploadify-queue {
display: none;
}
</style>
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<link href="Scripts/uploadify/css/uploadify.css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/uploadify/js/uploadify3.2.1/jquery.uploadify.js"></script>
<link href="Scripts/JqueryUI/css/redmond/jquery-ui-1.10.4.custom.css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/JqueryUI/js/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript">
$(function () { //弹出框的初始化方法
$("#dialog").dialog({ // 初始化之后,是否立即显示对话框,默认为 true
autoOpen: false, //设置弹出框的高度 400px
width: 400, //是否模式对话框,默认为 false
modal: true, //是否允许拖动,默认为 true
draggable: true, //是否可以调整对话框的大小,默认为 true
resizable: true, //弹出框的标题
title: "上传签名样本", /*用来设置对话框的位置,有三种设置方法
1. 一个字符串,允许的值为 'center', 'left', 'right', 'top', 'bottom'.
此属性的默认值即为 'center',表示对话框居中。
2. 一个数组,包含两个以像素为单位的位置,例如, var dialogOpts = { position: [100, 100] };
3. 一个字符串组成的数组,例如, ['right','top'],表示对话框将会位于窗口的右上角。
例如:var dialogOpts = { position: ["left", "bottom"] };*/
position: "center",
close: function () { //if ($('#btnUpload').length > 0) { //注意jquery下检查一个元素是否存在必须使用 .length >0 来判断 // $('#btnUpload').uploadify('destroy'); //}
} });
});
</script>
html
<div id="dialog" title="上传签名样本" style="text-align: center; display:none; ">
<input type="button" name="name" id="btnUpload" value="上传样本" />
<span>(只能上传.sign格式文件)</span>
</div>
最后是uploadify代码,列表中的a标签实在cs文件拼接的,这里不再列出,uploadify放在html标签后面:
function Upload(strCode) {
//打开弹出框的按钮
//单击按钮 调用弹出框的open方法
$("#dialog").dialog("open"); //上传
//上传插件初始化方法
$('#btnUpload').uploadify({ //选择文件后是否自动上传,默认为true
'auto': true,
//选择文件按钮
'buttonClass': 'some-class', //设置按钮文本
'buttonText': '上传样本', //单个文件大小,0为无限制,可接受KB,MB,GB等单位的字符串值 上传大文件 可参考使用手册说明
'fileSizeLimit': '0',
'queueSizeLimit': 1,
//文件描述
'fileTypeDesc': 'Files',
'multi': false,
//允许上传的文件类型 以分号分割
'fileTypeExts': '*.sign',
'onUploadStart': function (file) {
$("#btnUpload").uploadify("settings", "formData", { 'code': strCode });
},
//FLash文件路径
'swf': '/Scripts/uploadify/js/uploadify3.2.1/uploadify.swf',
//上传文件处理后台页面
'uploader': '/Ashx/SampleUp.ashx?action=mainUpload',
//上传成功后触发,每个文件都触发
'onUploadSuccess': function (file, data, response) {
window.location.reload(); }
});
}
解决方案
方法一
开始想了,既然刷新一下就不会出现该bug,就在弹出框关闭时将页面刷新。在弹出框的close的回调方法中添加代码:window.location.reload();每次弹出框关闭时,加个页面重新刷新一下,虽然解决了问题,但是,用户体验并不好,每次刷新,就会重新去读一次数据库,最后放弃了这个方式。
方法二
在弹出框的close的回调方法中,添加如下代码:
close: function () { if ($('#btnUpload').length > 0) { //注意jquery下检查一个元素是否存在必须使用 .length >0 来判断
$('#btnUpload').uploadify('destroy');//如果存在,则将其销毁
}
}
再次测试,问题解决。
问题解决了,为什么这就能解决问题呢?
猜想,第一次单击上传,根据上面列出的代码,可知每单击上传,就会通过uploadify方法创建上传flash对象,此时$('#btnUpload').length=1,此时id为(SWFUpload_0))的对象已经确定,关闭弹出框,但falsh对象仍然存在,并没有销毁。
再次单击的时
try {
document.getElementById("SWFUpload_0").SetReturnValue(__flash__toXML(SWFUpload.instances["SWFUpload_0"].testExternalInterface()) );
}
catch (e) { document.getElementById("SWFUpload_0").SetReturnValue("<undefined/>"); }
不再创建id为(SWFUpload_0))的flash对象,还是第一次创建的flash对象占着茅坑不拉屎(占着id,但名没有创建对象),所以此时为null,为了保持id的唯一性?,ie对此有限制?,是不是其他浏览器,在id存在的情况下,会随机生成一个新的id?不是搞前端的,不得而知了。
这也是自己的猜想,有高手的话,可以给个官方的说法,如果我这个猜想成立,那么也从侧面印证了为什么刷新一下,就没有那个bug了,刷新又重新加载html并且销毁了flash对象,单击上传又变成了第一次单击。
总结
这只是一个在工作中遇到的问题,说大不大说小不小,只是遇到问题了,并对此问题一些想法,总结一下。
纯属个人想法,没有论证,如果你对前端比较在行,可以留个足迹给个官方的说法,再次谢过了。
[js]uploadify结合jqueryUI弹出框上传,js中的冒出的bug,又被ie坑了的更多相关文章
- Java8 Stream()关于在所有用户的所有上传记录中,找出每个用户最新上传记录
原创文章:转载请标明出处 https://www.cnblogs.com/yunqing/p/9504196.html 首先分析相当于如下,在所有的猫中,每个名字的猫都保留年龄最小的一个 import ...
- QMessageBox 弹出框上的按钮设置为中文
Qt 默认的弹出框上的按钮式英文,虽然也知道是什么意思,但终究不如中文看着顺眼. QMessageBox box(QMessageBox::Warning,"标题","弹 ...
- uploadify插件实现多个图片上传并预览
使用uploadify插件可方便实现图片上传功能.兼容ie6.ie7. 上传成功之后使用插件的回调函数读取json数据,根据url实现图片预览. 效果图: 点击浏览文件上传图片,图片依次在右侧显示预览 ...
- Resumable.js – 基于 HTML5 File API 的文件上传
Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...
- 适用于各浏览器支持图片预览,无刷新异步上传js插件
文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...
- 百度编辑器前后端二开图片上传Js Thinkphp tp5 ueditor
百度编辑器图片上传Jsueditor.all.min.js 下载链接 链接:https://pan.baidu.com/s/1VNgw9ELgRRHKeCQheFkQTw 提取码:fnfi 使用方法: ...
- 上传js,js修改html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
- Plupload上传插件中文文档
Plupload上传插件中文帮助文档 如有疑问,加群交流:646104701 下载地址:https://www.plupload.com/download/ 配置参数 实例化一个plupload对象时 ...
随机推荐
- 虚拟机NAT网络设置
1. 虚拟机设置 2. 本地网络设置 3. 本地虚拟网卡设置 4. 安装虚拟机,设置网络为NAT方式即可访问外网.
- redis源码分析——aofrewrite
随着redis的运行,aof会不断膨胀(对于一个key会有多条aof日志),导致通过aof恢复数据时,耗费大量不必要的时间.redis提供的解决方案是aof rewrite.根据db的内容,对于每个k ...
- google浏览器中,使用clockwork 来调试
参考:https://laravel-china.org/courses/laravel-package/1976/debugging-tool-under-chrome-itsgoingdclock ...
- LGPL 与GPL的区别
GPL(GNU General Public License) 我们很熟悉的Linux就是采用了GPL.GPL协议和BSD, Apache Licence等鼓励代码重用的许可很不一样.GPL的出发点是 ...
- set -o vi AIX下shell
set -o vi 再用esc+K键就可以使用上一条指令了 esc+kesc+j上下翻 ksh默认是emacs风格的.set -o emacs 在AIX下使用自己已经使用过的命令 在AIX下使用,默认 ...
- 交通运输线(LCA)
题目大意: 战后有很多城市被严重破坏,我们需要重建城市.然而,有些建设材料只能在某些地方产生.因此,我们必须通过城市交通,来运送这些材料的城市.由于大部分道路已经在战争期间完全遭到破坏,可能有两个城市 ...
- ZOJ 1610 Count the Colors(区间染色)
题目大意:多组数据,每组给一个n(1=<n<=8000),下面有n行,每行有l,r,color(1=<color<=8000),表示将l~r颜色变为color,最后求各种颜色( ...
- 以太坊go-ethereum客户端JSON-RPC API调用(一)
前几篇博客主要介绍了go-ethereum客户端不同环境的搭建,今天这篇博客是建立在前几排博客的基础上.当搭建完成之后,我们可以通过各种方式与节点进行交互(JavaScript Console.JSO ...
- day4 正则表达式(regular)
正则(regular),要使用正则表达式需要导入Python中的re(regular正则的缩写)模块.正则表达式是对字符串的处理,我们知道,字符串中有时候包含很多我们想要提取的信息,掌握这些处理字符串 ...
- python开发学习-day09(队列、多路IO阻塞、堡垒机模块、mysql操作模块)
s12-20160312-day09 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...