Bootstrap模态框使用WebUploader点击失效问题解决
来源:互联网 发布:centos无法用ssh指令 编辑:程序博客网 时间:2024/05/20 15:57
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>
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!"); } });});
bootstrap模态框事件
参考
http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
http://fex.baidu.com/webuploader/
@本文转载自:http://blog.csdn.net/u014513883/article/details/52699797
阅读全文
0 0
- Bootstrap模态框使用WebUploader点击失效问题解决
- Bootstrap模态框使用WebUploader点击失效问题解决
- Bootstrap模态框使用WebUploader点击失效问题解决
- bootstrap-datatimepicker双击失效问题解决。
- iphone微信移动端bootstrap的模态框modal失效VS点击失效
- ListView点击单个Item失效问题解决办法
- SlidingMenu按钮事件失效无法点击问题解决
- 开发Javaweb项目中遇到的webuploader在模态框中选项卡点击失效问题
- WebUploader使用
- bootstrap 模态框抖动问题解决
- webuploader在ie8上传失效
- SpringMVC JSP文件加载bootstrap 路径失效问题解决
- webuploader上传按钮不能点击
- 在BootStarp模态框中是用百度WebUploader失效问题
- bootstrap模态框点击关闭问题
- 在bootstrap模态框modal里使用clipboard.js时复制失效
- (转)ueditor使用webuploader以后多图上传后顺序乱掉问题解决方法
- webuploader 使用实例
- android studio 翻译插件,可以将英文翻译为中文
- 【oracle语法】-for update 与 rowid
- 进程间的八种通信方式
- 数据结构实验之图论十一:AOE网上的关键路径
- CryptographicBuffer的使用技巧
- Bootstrap模态框使用WebUploader点击失效问题解决
- Unity Shader中的概念及原理综述
- 浅谈模板引擎之artTemplate
- 文本情感分类—深度学习模型基本概念
- Merge Intervals
- PHPExcel 大数据的导出
- vue.js 学习笔记
- bootstrap上传插件fileinput自动上传&成功回调 转载 2016年10月11日 11:24:09 7141 bootstrap上传插件fileinput功能非常强大,本文给出一例自动上传
- 【知识图谱】知识图谱从0级到10级简化版