【求助】bootstrap fileinput组件放在模态框中上传事件失效
使用bootstrap fileinput组件遇到问题
fileinput组件代码放在点击事件代码中，
组件的上传按钮就点击不了，该如何解？
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>系统</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://plugins.krajee.com/assets/1fe5aa63/css/fileinput.min.css">
<script src="http://plugins.krajee.com/assets/1fe5aa63/js/fileinput.min.js"></script>
<script src="http://plugins.krajee.com/assets/1fe5aa63/js/locales/zh.js"></script>
</head>
<body style="margin:15px;">
<button class="btn btn-primary btn-lg" id="upload">
点击上传
</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">
<input id="f_upload" type="file" class="file" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<script type="text/javascript">
console.log("开始啦")
$(function(){
$("#upload").on("click",function(){
$("#myModal").modal("show");
$("#f_upload").fileinput({
language: 'zh',
uploadUrl: "api/file/create",
allowedFileExtensions: ['jpg', 'png', 'gif']
});
$("#f_upload").on("fileuploaded", function(event, data, previewId, index) {
if(data.response.status==1){
console.log(data.response.path)
}
});
});
});
</script>
</body>
</html>如果把代码移出，如下，就可以上传按钮可以正常点击了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>系统</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://plugins.krajee.com/assets/1fe5aa63/css/fileinput.min.css">
<script src="http://plugins.krajee.com/assets/1fe5aa63/js/fileinput.min.js"></script>
<script src="http://plugins.krajee.com/assets/1fe5aa63/js/locales/zh.js"></script>
</head>
<body style="margin:15px;">
<button class="btn btn-primary btn-lg" id="upload">
点击上传
</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">
<input id="f_upload" type="file" class="file" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<script type="text/javascript">
console.log("开始啦")
$("#f_upload").fileinput({
language: 'zh',
uploadUrl: "api/file/create",
allowedFileExtensions: ['jpg', 'png', 'gif']
});
$("#f_upload").on("fileuploaded", function(event, data, previewId, index) {
if(data.response.status==1){
console.log(data.response.path)
}
});
$(function(){
$("#upload").on("click",function(){
$("#myModal").modal("show");
});
});
</script>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论