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

快来打我* 2022-07-16 02:37 199阅读 0赞

# 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">
        
        <script src="${ctx}/static/js/libs/jquery-1.11.3.min.js"></script>
        
        <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>
        
        <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>
    
    
    
    <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">
                        ×
                    </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>
        </div>
    </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>

# 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'
            }
        });

# 解决 #

## 方法一 ##

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

function create(){
         uploader.addButton({
         id: '#filePicker',
         innerHTML: '上传'
         });
    }

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

## 方法二 ##

在模态框弹出后再初始化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!");
            }
        });
    });

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

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

# bootstrap模态框事件 #

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

**参考**

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

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