Bootstrap模态框使用WebUploader点击失效问题解决
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>- 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/