[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,代码不再说明,写有注释:
1 <style type="text/css"> 2 /*隐藏上传的进度条*/ 3 .uploadify-queue { 4 display: none; 5 } 6 </style> 7 <script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script> 8 <link href="Scripts/uploadify/css/uploadify.css" rel="stylesheet" /> 9 <script type="text/javascript" src="Scripts/uploadify/js/uploadify3.2.1/jquery.uploadify.js"></script> 10 <link href="Scripts/JqueryUI/css/redmond/jquery-ui-1.10.4.custom.css" rel="stylesheet" /> 11 <script type="text/javascript" src="Scripts/JqueryUI/js/jquery-ui-1.10.4.custom.js"></script> 12 <script type="text/javascript"> 13 $(function () { 14 15 //弹出框的初始化方法 16 $("#dialog").dialog({ 17 18 // 初始化之后,是否立即显示对话框,默认为 true 19 autoOpen: false, 20 21 //设置弹出框的高度 400px 22 width: 400, 23 24 //是否模式对话框,默认为 false 25 modal: true, 26 27 //是否允许拖动,默认为 true 28 draggable: true, 29 30 //是否可以调整对话框的大小,默认为 true 31 resizable: true, 32 33 //弹出框的标题 34 title: "上传签名样本", 35 36 /*用来设置对话框的位置,有三种设置方法 37 1. 一个字符串,允许的值为 'center', 'left', 'right', 'top', 'bottom'. 38 此属性的默认值即为 'center',表示对话框居中。 39 2. 一个数组,包含两个以像素为单位的位置,例如, var dialogOpts = { position: [100, 100] }; 40 3. 一个字符串组成的数组,例如, ['right','top'],表示对话框将会位于窗口的右上角。 41 例如:var dialogOpts = { position: ["left", "bottom"] };*/ 42 position: "center", 43 close: function () { 44 45 //if ($('#btnUpload').length > 0) { //注意jquery下检查一个元素是否存在必须使用 .length >0 来判断 46 47 // $('#btnUpload').uploadify('destroy'); 48 49 //} 50 } 51 52 }); 53 }); 54 </script>
html
1 <div id="dialog" title="上传签名样本" style="text-align: center; display:none; "> 2 <input type="button" name="name" id="btnUpload" value="上传样本" /> 3 <span>(只能上传.sign格式文件)</span> 4 </div>
最后是uploadify代码,列表中的a标签实在cs文件拼接的,这里不再列出,uploadify放在html标签后面:
1 function Upload(strCode) { 2 //打开弹出框的按钮 3 //单击按钮 调用弹出框的open方法 4 $("#dialog").dialog("open"); 5 6 //上传 7 //上传插件初始化方法 8 $('#btnUpload').uploadify({ 9 10 //选择文件后是否自动上传,默认为true 11 'auto': true, 12 //选择文件按钮 13 'buttonClass': 'some-class', 14 15 //设置按钮文本 16 'buttonText': '上传样本', 17 18 //单个文件大小,0为无限制,可接受KB,MB,GB等单位的字符串值 上传大文件 可参考使用手册说明 19 'fileSizeLimit': '0', 20 'queueSizeLimit': 1, 21 //文件描述 22 'fileTypeDesc': 'Files', 23 'multi': false, 24 //允许上传的文件类型 以分号分割 25 'fileTypeExts': '*.sign', 26 'onUploadStart': function (file) { 27 $("#btnUpload").uploadify("settings", "formData", { 'code': strCode }); 28 }, 29 //FLash文件路径 30 'swf': '/Scripts/uploadify/js/uploadify3.2.1/uploadify.swf', 31 //上传文件处理后台页面 32 'uploader': '/Ashx/SampleUp.ashx?action=mainUpload', 33 //上传成功后触发,每个文件都触发 34 'onUploadSuccess': function (file, data, response) { 35 window.location.reload(); 36 37 } 38 }); 39 }
解决方案
方法一
开始想了,既然刷新一下就不会出现该bug,就在弹出框关闭时将页面刷新。在弹出框的close的回调方法中添加代码:window.location.reload();每次弹出框关闭时,加个页面重新刷新一下,虽然解决了问题,但是,用户体验并不好,每次刷新,就会重新去读一次数据库,最后放弃了这个方式。
方法二
在弹出框的close的回调方法中,添加如下代码:
1 close: function () { 2 3 if ($('#btnUpload').length > 0) { //注意jquery下检查一个元素是否存在必须使用 .length >0 来判断 4 $('#btnUpload').uploadify('destroy');//如果存在,则将其销毁 5 } 6 }
再次测试,问题解决。
问题解决了,为什么这就能解决问题呢?
猜想,第一次单击上传,根据上面列出的代码,可知每单击上传,就会通过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对象,单击上传又变成了第一次单击。
总结
这只是一个在工作中遇到的问题,说大不大说小不小,只是遇到问题了,并对此问题一些想法,总结一下。
纯属个人想法,没有论证,如果你对前端比较在行,可以留个足迹给个官方的说法,再次谢过了。
转载于:https://www.cnblogs.com/wolf-sun/p/3703364.html
[js]uploadify结合jqueryUI弹出框上传,js中的冒出的bug,又被ie坑了相关推荐
- jQuery引起的用layer弹出层上传文件不能获取文件名的解决(thinkphp5)
一.问题 在用thinkphp5做到用layer弹出层上传文件过程中,一直不能成功.详细代码如下: HTML代码: <div id="importBox" v-show=&q ...
- php 上传图片 预览 多张,uploadify插件实现多个图片上传并预览
使用uploadify插件可方便实现图片上传功能.兼容ie6.ie7. 上传成功之后使用插件的回调函数读取json数据,根据url实现图片预览. 效果图: 点击浏览文件上传图片,图片依次在右侧显示预览 ...
- 适用于各浏览器支持图片预览,无刷新异步批量上传js插件(2)
之前写的这个上传插件,同事们都觉得还不错,不过都觉得还不够完美,于是决定使用业余时间对此插件持续优化,可能你过段时间会发现,插件又增加了新功能什么的,请注意文章后面评论里的更新说明. 以前在上传的时候 ...
- Jsp中Uploadify插件的使用(jQuery上传插件)
原文地址:Jsp中Uploadify插件的使用(jQuery上传插件)作者:项海军 该插件使用的是jQuery,Flash和后端(您选择哪种语言实现的上传)脚本的组合. 如何来使用它? --执行此插件 ...
- JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
- html5七牛图片上传js,前端如何上传图片至七牛云
上传文件是我们在前端开发中经常遇到的一个问题.最近在做某项目管理后台的时候,需要将轮播图上传至七牛云.以前在Vue里面做过类似的功能,但是在Angular中使用同样的方法发现行不通. 此篇文章主要介绍 ...
- Plupload上传插件中文文档
Plupload上传插件中文帮助文档 如有疑问,加群交流:646104701 下载地址:https://www.plupload.com/download/ 配置参数 实例化一个plupload对象时 ...
- 万能表单解析工具在xheditor上传文件中的应用
利用JadePool中的万能表单解析工具cn.jadepool.web.ProcessForm可以轻松解析表单提交的全部信息,甚至可以轻松获取一个未知结构的表单由那些字段组成.以下是在xheditor ...
- check上传模板中的金额字段中的千分位
在上传模板中的金额字段中有千分位,要做check,不能直接上载带有千分位的数据. search it_tab-wrbtr for ','. if sy-subrc eq 0. message '金额的 ...
最新文章
- iOS lldb调试
- matplotlib设置多个图例横向水平放置
- 大连市打造数字人民币应用示范村
- 实战:自定义脚本启动mysql-mysql 5.6.19
- Sublime Text3底部面板添加命令行(cmd)
- 编程基础(动态内存的分配)
- 【SVN】解决SVN安装语言包后无法选择中文的问题
- 计算机应用基础 教学工作总结,四年级下期计算机教学工作总结(共3篇)
- PayPal开发前台生成订单和后台生成订单
- 小米路由器登陆以及切换wan账户脚本
- 《空间分析》——思维导图
- 润达软件-督查督办管理系统
- 禁止网页右键查看源代码
- md5解密算法 java_MD5算法解密java
- Java基础知识----字符串
- 关于寻迹小车组装建议
- 宁夏-银川地区geojson数据
- 一文读懂程序化交易算法交易量化投资高频交易统计利
- 二进制补码计算——有符号数的乘法
- Raspberry - 无线网卡迅捷FW150US驱动安装
热门文章
- javascript 时钟代码 自动时间
- Android源码之Camera系统架构
- nagios监控远程端口
- git安装和使用案例
- Java对象和XML之间的编排与反编排
- Codeforces Beta Round #96 (Div. 1) D. Constants in the language of Shakespeare 贪心
- Qt 提取文件(exe, dll等)中的图标icon
- aptana对齐快捷键ctrl+shift+f
- .net lucene 实战搜索(二)----- 基本之索引
- [导入]MsAjax Lib- Array.insert 函数