引言

最近在一个项目中,在用户列表中需要对给没有签名样本的个别用户上传签名的样本,就想到博客园中上传图片使用弹出框方式,博客园具体怎么实现的不知道,只是如果自己来弄,想到两个插件的结合使用,在弹出框中使用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坑了的更多相关文章

  1. Java8 Stream()关于在所有用户的所有上传记录中,找出每个用户最新上传记录

    原创文章:转载请标明出处 https://www.cnblogs.com/yunqing/p/9504196.html 首先分析相当于如下,在所有的猫中,每个名字的猫都保留年龄最小的一个 import ...

  2. QMessageBox 弹出框上的按钮设置为中文

    Qt 默认的弹出框上的按钮式英文,虽然也知道是什么意思,但终究不如中文看着顺眼. QMessageBox box(QMessageBox::Warning,"标题","弹 ...

  3. uploadify插件实现多个图片上传并预览

    使用uploadify插件可方便实现图片上传功能.兼容ie6.ie7. 上传成功之后使用插件的回调函数读取json数据,根据url实现图片预览. 效果图: 点击浏览文件上传图片,图片依次在右侧显示预览 ...

  4. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  5. 适用于各浏览器支持图片预览,无刷新异步上传js插件

    文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...

  6. 百度编辑器前后端二开图片上传Js Thinkphp tp5 ueditor

    百度编辑器图片上传Jsueditor.all.min.js 下载链接 链接:https://pan.baidu.com/s/1VNgw9ELgRRHKeCQheFkQTw 提取码:fnfi 使用方法: ...

  7. 上传js,js修改html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  9. Plupload上传插件中文文档

    Plupload上传插件中文帮助文档 如有疑问,加群交流:646104701 下载地址:https://www.plupload.com/download/ 配置参数 实例化一个plupload对象时 ...

随机推荐

  1. python3.6升级及setuptools、pip安装

    升级python3.6 1.打开官网www.python.org,找到最新3.6.3版本,复制下载链接 2.创建/app目录,wget下载到该目录下,编译安装 mkdir /app cd /app w ...

  2. 系统日志查看logrotate 工具

    logrotate是作为linux系统日志的管理工具存在.他可以轮换,压缩,邮件系统日志文件. 默认的logrotate被加入cron的/etc/cron.daily中作为每日任务执行./etc/lo ...

  3. 初涉yield

    function* a(i) { console.log('here we go'); yield i; // 必须有*,不然b会作为返回值,而不是执行 yield* b(i); yield i+10 ...

  4. Mariadb 10.2中的json使用及应用场景思考

    -- 创建示例表DROP TABLE IF EXISTS `t_base_user`;CREATE TABLE `t_base_user`  (  `USER_ID` char(36) CHARACT ...

  5. Tornado入门资料整理

    预备知识 没学过计网的苦逼找点现成一些的东西看吧…… <Restful Web Services>,<HTTP The Definitive Guide>,各种RFC WSGI ...

  6. IEEEXtreme 10.0 - Ellipse Art

    这是 meelo 原创的 IEEEXtreme极限编程大赛题解 Xtreme 10.0 - Ellipse Art 题目来源 第10届IEEE极限编程大赛 https://www.hackerrank ...

  7. function(函数)中的动态参数

    我们可向函数传递动态参数,*args,**kwargs,首先我们来看*args,示例如下:     1.show(*args) def show(*args): print(args,type(arg ...

  8. 4. CMake 系列 - 项目添加编译选项

    目录 1. 项目目录结构 2. 相关代码 2.1 add 模块 2.2 sub 模块 2.3 example 模块 2.4 顶层 CMakeLists.txt 3. 配置&编译 1. 项目目录 ...

  9. 编写WPF程序,完成弹框打印和直接打印

    弹框打印 PrintDialog pd = new PrintDialog(); pd.ShowDialog(); //↓第一个参数是StackPanel控件里面放一个label放打印的文字 pd.P ...

  10. struts2框架的大致处理流程

    1,浏览器发送请求,例如请求 /mypage.action /report/myreport.pdf等. 2,核心控制器FilterDispatcher根据请求决定调用合适的Action. 3,Web ...