由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅。

今天说一下,下午在工作中遇到的一个问题:公司的后端同事用bootstrap的模态框,结合WebUploadder做后台上传文件的功能的时候,发现上传按钮点击无效。同事过来请求我支援,我研究了下,发现了三种解决方案,下面具体说说是这三种方法是怎么解决的。

我们先来分析一下解决这个问题的思路:

为什么上传控件放到模态框里面就不行了呢?而不在模态框的正常dom下却是可以的。我猜测导致问题的原因是因为模态框的dom结构刚开始是隐藏的元素display:none,而对diaplay:none的元素执行js,是不会生效的,要解决这个问题,我们就要在模态框渲染完之后,模态框对应的dom节点在页面上都加载完成之后重新去执行上传控件的js。于是出现了下面三种解决方案。

方案一:

使用uploader.refresh();

在模态框加载完成之后,执行这个函数,代码如下。

    //create()
var uploader = WebUploader.create({
// swf文件路径
swf:'webuploader/Uploader.swf', // 文件接收服务端。
server: 'http://webuploader.duapp.com/server/fileupload.php', // 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#picker', // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
resize: true
});
$('#myModal').on('shown.bs.modal', function () {
uploader.refresh();//在模态框加载完成之后执行重绘按钮的方法。
});

方案二:

在模态框加载完成之后,重新绘制按钮。

代码如下:

 var uploader = WebUploader.create({
// swf文件路径
swf:'webuploader/Uploader.swf', // 文件接收服务端。
server: 'http://webuploader.duapp.com/server/fileupload.php', // 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#picker', // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
resize: true
});
function create(){
uploader.addButton({
id: '#picker',
innerHTML: '选择文件'
});
}
$('#myModal').on('shown.bs.modal', function () {
//uploader.refresh();
create()
});

方案三:

在模态框执行完之后再执行,上传控件按钮的js

 var uploader = null;
$('#myModal').on('shown.bs.modal', function () {
//uploader.refresh();
//create()
uploader = WebUploader.create({
// swf文件路径
swf:'webuploader/Uploader.swf',
// 文件接收服务端。
server: 'http://webuploader.duapp.com/server/fileupload.php', // 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#picker', // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
resize: true
});
});
//关闭模态框销毁WebUploader,解决再次打开模态框时按钮越变越大问题,同时为了节约内存,销毁不必要的内存开销。
$('#myModal').on('hide.bs.modal', function () {
uploader.destroy();
});

注意第三种方法,必须要在关闭模态框之后执行上传控件销毁事件,以节省内存开销。

模态框渲染过程中不同生命周期如何调用函数,可以查看bootstap的模态框api,

从这个例子中,需要了解,开发一个控件的时候,一定要定义方法能够对不同的周期进行控制,并且要定义销毁控件的方法,只有这样才是一个完整的好用的控件。

WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法的更多相关文章

  1. iframe中使用模态框提交表单后,iframe加载父页面的解决方法

    在iframe中使用模态框提交表单后,会出现iframe加载整个父页面的问题,如下图: 解决方法: 在form表单中添加target属性 _parent 这个属性会使目标文档载入父窗口或者包含来超链接 ...

  2. CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:

    19:29 2016/3/10CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:项目主路径:F:\wamp\www\graduationPr ...

  3. Bootstrap 实例 - 模态框(Modal)插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Bootstrap使用模态框modal实现表单提交弹出框

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

  5. bootstrap的模态框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. layui实现类似于bootstrap的模态框功能

    以前习惯了bootstrap的模态框,突然换了layui,想的用layui实现类似于bootstrap的模态框功能. 用到了layui的layer模块,例如: <!DOCTYPE html> ...

  7. bootstrap删除模态框弹出并询问是否删除【通用删除模态框】

    普通的询问是否删除的对话框比较low,可以利用bootstrap的模态框代替普通的对话框来实现删除. 效果: 点删除的时候弹出模态框询问是否删除,点确认的时候将需要删除的ID传到后台进行删除.  过程 ...

  8. 重置 Bootstrap modal 模态框数据

    利用 Bootstrap modal 模态框弹层添加或编辑数据,第二次弹出模态框时总是记住上一次的数据值,stackoverflow 上找到个比较好的方法,就是利用 jQuery 的 clone 方法 ...

  9. Bootstrap.之模态框 显示在遮罩层后面

    Bootstrap.之模态框 显示在遮罩层后面 问题描述: 在使用bootstrap模态框,弹出的窗口在遮罩层后面,见图: 解决方案: 保证模态框的代码,所在的上一级(父元素)是body标签,即可.例 ...

随机推荐

  1. bootstrap基础学习三篇

    bootstrap的排版 1.标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式 2.代码如下: <div class="container"& ...

  2. ChemDraw使用不了怎么办

    ChemDraw作为一款专业级的化学绘图软件,不仅可以帮助用户绘制图像在数据计算方面也起了很大作用,因此,ChemDraw非常受用户的欢迎.但是我们在使用过程中难免会遇到各种问题,特别是对于新手用户, ...

  3. JavaScript 二、eval 和 with 函数

    /* * ========================================================= * * JavaScript 词法欺骗 * * 1.欺骗词法作用域,会导致 ...

  4. oracle decode处理被除数为0 的情况

    ,,a) per from aa; 例如 我的b为(N30+N31+N32+N33+N34+N35+N36+N37+N38) ,,(N33)||'%' WHERE ssrq=''||sssq||'';

  5. iOS开发之--搭建本地的SVN服务器

    近期入职的新公司,后台没有分配svn账号,需要在本地搭建一个服务器,方便和代码,看了看网上的教程,一直有这样那样的问题, 其中最主要的问题还是路径拼接的问题,最后终于解决了,特在此分享下,如果大家有更 ...

  6. shell脚本学习总结04--终端信息的获取和设置

    tput tput 命令将通过 terminfo 数据库对您的终端会话进行初始化和操作.通过使用 tput,您可以更改几项终端功能,如移动或更改光标.更改文本属性,以及清除终端屏幕的特定区域. 文本属 ...

  7. Linux 下8种优秀的屏幕录制机

    导读 屏幕录制机已经成为常见的和良好的实践来记录一个重要桌面会话,例如,你想玩一个难度较大的游戏,并且向记录是如何完成的,或者你打算创建一个视频教程,入门文章或指南,或任何其他活动和记录你的桌面会话, ...

  8. 【BZOJ2879】[Noi2012]美食节 动态加边网络流

    [BZOJ2879][Noi2012]美食节 Description CZ市为了欢迎全国各地的同学,特地举办了一场盛大的美食节.作为一个喜欢尝鲜的美食客,小M自然不愿意错过这场盛宴.他很快就尝遍了美食 ...

  9. DocumentFragment 不支持 innerHTML

    在需要多次使用 innerHTML 的地方,一般是推荐用 DocumentFragment 来缓存,最后一次性插入 body,从而减少浏览器的渲染,提高性能,不过最近也发现一个 bug: Docume ...

  10. 深入分析Cocos2d-x 2.0中的“纹理”

    对CCImage的绘制是通过CCTexture2D来实现的(OPENGL es)通过纹理绘制到某个面. (本文中所提到的方法在cocos2d2.0中部分有调整,请应用时候具体察看源码)1. 首先来了解 ...