时间戳

首页 > 解决方案 > Bootstrap 3 DropdownButton 激活文件选择框

jquery - Bootstrap 3 DropdownButton 激活文件选择框

问题描述

我使用 bootstrap 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，我可以使用类函数触发：

    $(document).ready( function () {
    
    $(".image").click(function(){
        alert("Image is chosen");
    });
    ....

但是如何触发文件选择框？Normaly 我在 html 代码中使用：

<input type="file" name="image" class="image" id="upload_image" style="display:none" />

但我不能在 li 标签之间使用它。有人知道吗？

标签： jquerytwitter-bootstrap-3

解决方案

我假设您希望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>

推荐阅读