jquery - Bootstrap 3 DropdownButton which activate file select box

Question

Welcome To Ask or Share your Answers For Others

jquery - Bootstrap 3 DropdownButton which activate file select box

asked Jan 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

jquery - Bootstrap 3 DropdownButton which activate file select box

I uses bootstrap 3 and create a dropdownbutton. With the first option "Image" I will open a file selectbox.

    <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>

With some jquery I can trigger with the class a function:

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

But how can I trigger a file select box? Normaly I uses in the html-code:

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

But I can't use it between the li tags. Does anybody know?

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-01-24T02:49:01+0000

I assume that you are looking to open fileupload on click of image. You are almost there. You need to trigger the click for file upload as below

    $(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>

Categories

jquery - Bootstrap 3 DropdownButton which activate file select box

jquery - Bootstrap 3 DropdownButton which activate file select box

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags