如何解决Bootstrap 3 DropdownButton 激活文件选择框
我使用引导程序 3 并创建了一个下拉按钮。使用第一个选项“图像”，我将打开一个文件选择框。
<div class="btn-group pull-right" style="margin-top:17px; margin-left:15px">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Media toevoegen <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a class="image" href="#">Image</a></li>
<li><a class="youtube" href="#">YouTube</a></li>
<li><a class="soundcloud" href="#">SoundClound</a></li>
</ul>
</div>
使用一些 jquery 我可以用类 a 函数触发：
$(document).ready( function () {
$(".image").click(function(){
alert("Image is chosen");
});
....
但是如何触发文件选择框？通常我在 html 代码中使用：
<input type="file" name="image" class="image" id="upload_image" style="display:none" />
但是我不能在 li 标签之间使用它。有人知道吗？
解决方法
我假设您希望在点击 fileupload 时打开 image。你快到了。您需要触发点击文件上传如下
$(function() {
$(".image").click(function(event) {
event.preventDefault()
$("#upload").trigger('click');
//$("#upload").click();
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$(function() {
$(".image").click(function(event) {
event.preventDefault()
$("#upload").trigger('click');
});
});
</script>
</head>
<body>
<div class="container">
<div class="btn-group pull-right" style="margin-top:17px; margin-left:15px">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Media toevoegen <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<input id="upload" type="file" style="display:none">
<a class="image" href="" >image</a>
</li>
<li><a class="youtube" href="#">YouTube</a></li>
<li><a class="soundcloud" href="#">SoundClound</a></li>
</ul>
</div>
</div>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。