Bootstrap模态框使用WebUploader点击失效问题解决

来源：互联网发布：精雕软件视频教程编辑：程序博客网时间：2024/06/10 08:58

JSP代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %><c:set var="ctx" value="${pageContext.request.contextPath}"/><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <meta HTTP-EQUIV="Pragma" CONTENT="no-cache">    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache">    <meta HTTP-EQUIV="Expires" CONTENT="0">    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->    <script src="${ctx}/static/js/libs/jquery-1.11.3.min.js"></script>    <!--版本3.3.0-->    <script src="${ctx}/static/js/libs/bootstrap.min.js"></script>    <!--文件上传插件-->    <link rel="stylesheet" type="text/css" href="${ctx}/static/css/webuploader.css">    <script type="text/javascript" src="${ctx}/static/js/libs//webuploader.js"></script>    <!-- 新 Bootstrap 核心 CSS 文件 -->    <link rel="stylesheet" href="${ctx}/static/css/bootstrap.min.css">    <title>Bootstrap模态框</title></head><body><!-- 按钮触发模态框 --><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">    点击弹出框</button><!-- 模态框（Modal） --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">    <div class="modal-dialog">        <div class="modal-content">            <div class="modal-header">                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">                    &times;                </button>                <h4 class="modal-title" id="myModalLabel">                    标题                </h4>            </div>            <div class="modal-body">                <form class="form-horizontal" role="form">                    <div class="form-group">                        <label class="col-sm-4 control-label">上传图片：</label>                        <div class="col-sm-6">                            <div  style="display: inline-block;">                                <span id="filePicker" onclick="create()">上传</span>                                <span id="responeseText" style="display: inline-block;"></span>                            </div>                        </div>                    </div>                </form>            </div>            <div class="modal-footer">                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>                <button type="button" class="btn btn-info">确认</button>            </div>        </div><!-- /.modal-content -->    </div><!-- /.modal --></div><input type="hidden" id="contextPath"  value='${pageContext.request.contextPath}'><script type="text/javascript" src="${ctx}/static/js/partner/modal.js?v=44575646" charset="UTF-8"></script></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

JS代码

/*modal.js*/var uploader = WebUploader.create({        swf : '/web/public/Uploader.swf',        server : $("#contextPath").val()+'/common/file/upload',// 后台路径        pick : '#filePicker', // 选择文件的按钮。可选。内部根据当前运行是创建，可能是input元素，也可能是flash.        resize : false,// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！        chunked : true, // 是否分片        duplicate : true,//去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.        chunkSize : 52428 * 100, // 分片大小， 5M        fileSingleSizeLimit : 100*1024,//文件大小限制        auto : true,        // 只允许选择图片文件。        accept: {            title: 'Images',            extensions: 'gif,jpg,jpeg,bmp,png',            mimeTypes: 'image/jpg,image/jpeg,image/png'        }    });1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

解决

方法一

在上传按钮上监听一个点击事件，如create()，在该函数中重新生成上传按钮

function create(){     uploader.addButton({     id: '#filePicker',     innerHTML: '上传'     });}1
2
3
4
5
6
1
2
3
4
5
6

通过该函数，每次点击上传时重新生成上传按钮，这种方式的弊端是，第一次点击上传按钮总是没反应的，之后再次点击才能弹出文件选择框

方法二

在模态框弹出后再初始化webuploader

var uploader;//在点击弹出模态框的时候再初始化WebUploader，解决点击上传无反应问题$("#myModal").on("shown.bs.modal",function(){    uploader = WebUploader.create({        swf : '/web/public/Uploader.swf',        server : $("#jumicontextPath").val()+'/common/file/upload',// 后台路径        pick : '#filePicker', // 选择文件的按钮。可选。内部根据当前运行是创建，可能是input元素，也可能是flash.        resize : false,// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！        chunked : true, // 是否分片        duplicate:true,//去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.        chunkSize : 52428 * 100, // 分片大小， 5M        /*    fileSingleSizeLimit:100*1024,//文件大小限制*/        auto : true,        // 只允许选择图片文件。        accept: {            title: 'Images',            extensions: 'gif,jpg,jpeg,bmp,png',            mimeTypes: 'image/jpg,image/jpeg,image/png'        }    });    // 文件上传成功，给item添加成功class, 用样式标记上传成功。    uploader.on('uploadSuccess', function (file,response) {        var fileUrl = response.data.fileUrl;        //TODO        $("#responeseText").text("上传成功,文件名："+response.data.fileName);    });    // 当文件上传出错时触发    uploader.on('uploadError', function (file) {        $("#responeseText").text("上传失败");    });    //当validate不通过时触发    uploader.on('error', function (type) {        if(type=="F_EXCEED_SIZE"){            alert("文件大小不能超过xxx KB!");        }    });});1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

单单这样也会有问题，这样每次弹出模态框之后都加载一个边框，使按钮越来越大，所以需要在关闭模态框后销毁webuploader

//关闭模态框销毁WebUploader，解决再次打开模态框时按钮越变越大问题$('#myModal').on('hide.bs.modal', function () {    $("#responeseText").text("");    uploader.destroy();});1
2
3
4
5
1
2
3
4
5

bootstrap模态框事件

事件描述show.bs.modal在调用 show 方法后触发。shown.bs.modal当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。hide.bs.modal当调用 hide 实例方法时触发。hidden.bs.modal当模态框完全对用户隐藏时触发。

参考

http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

http://fex.baidu.com/webuploader/

阅读全文

0 0