Bootstrap模态框使用WebUploader点击失效问题解决
2017-08-25 09:54
471 查看
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"> × </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><
10032
/pre>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/
相关文章推荐
- Bootstrap模态框使用WebUploader点击失效问题解决
- Bootstrap模态框使用WebUploader点击失效问题解决
- Bootstrap模态框使用WebUploader点击失效问题解决
- bootstrap下modal模态框中webuploader控件按钮异常(无法点击)问题解决办法【转】
- 解决在Bootstrap模糊框中使用WebUploader的问题
- 解决Bootstrap模态窗口Modal中使用Kindeditor或UEditor编辑器 点击关闭弹窗 出现第二次无法加载的问题
- 开发Javaweb项目中遇到的webuploader在模态框中选项卡点击失效问题
- Android开发之如何在WebView中点击链接使用自身打开(解决出现的选择使用第三方应用的问题)
- 解决WebUploader 选择文件按钮点击无效问题
- IE8下使用webuploader点击无反应的解决方法。
- DialogFragment的使用及利用自定义interface点击事件并解决旋转屏幕点击事件失效问题
- 今天使用PullToRefreshListView时遇到Item点击事件失效问题,特此记下解决办法
- Android使用WebView嵌入网页,网页内点击跳转到另一个网页后,返回问题解决
- 解决webuploader 点击上传文件时,每调用上传函数后,上传文件框就会变大的问题
- webuploader模态框ueditor显示问题解决方法
- 在bootstrap modal dialog中使用webupload,打不开对话框问题解决
- 解决Bootstrap模态窗口Modal中使用Kindeditor或UEditor编辑器第二次无法加载的问题
- android用webview加载H5页面出现点击事件失效的问题解决
- 解决Bootstrap模态窗口Modal中使用Kindeditor或UEditor编辑器第二次无法加载的问题
- bootstrap下使用模态框,在模态框内输入框中回车时,模态框自动关闭的问题及解决方法