Roep een 'file select object' aan via een bootstrap dropdown button?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Nicos Vermeulen

Nicos Vermeulen

20/01/2021 22:20:47
Quote Anchor link
Beste mensen,

Ik maak gebruik van Bootstrap in combinatie met jquery. Ik heb een dropdown button gemaakt waar één van de opties is om een afbeelding te uploaden. Wanneer ik de optie 'Afbeelding' kies, wil ik een file select control weergeven om zo de juiste afbeelding te kiezen.

Normaal krijg je de file select control te zien met de volgende HTML code:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
<label for="myfile">Select a file:</label>
 <input type="file" id="myfile" name="myfile">

Echter hoe zou ik dit nu kunnen aanpakken in de dropdown button?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
<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">
     Toevoegen <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a class="afbeelding" href="#">Afbeelding</a></li>>
    <li><a class="youtube" href="#">Word document</a></li>
    <li><a class="soundcloud" href="#">PDF</a></li>
  </ul>
 </div>

Normaal trigger ik met de class "afbeelding" een jquery functie. Wanneer het de file select control toevoeg tussen de <li> of <a> tags, krijg ik het grafisch niet voor elkaar om de layout met een 'handje' netjes te krijgen.

Heeft er iemand een tip?

Toevoeging op 21/01/2021 11:25:32:

Toch voor elkaar gekregen.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
        <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">
            Toevoegen <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a class="image" href="#">Afbeelding</a></li>
            <li><a class="youtube" href="#">YouTube</a></li>
            <li><a class="soundcloud" href="#">SoundClound</a></li>
          </ul>
        </div>

        <input type="file" name="s_file" id="s_file" class="hidden" accept=".jpg">


Daarna met jquery:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
        $(".image").click(function(){            // Afbeelding wordt aangeklikt in dropdownmenu waardoor file select object wordt weergegeven
            $("#s_file").trigger("click");
        });
Gewijzigd op 21/01/2021 11:26:39 door Nicos Vermeulen
 
PHP hulp

PHP hulp

19/03/2024 10:28:46
 
Cor Zelf

Cor Zelf

28/01/2021 10:43:05
Quote Anchor link
In plaats van class="afbeelding" zou je data-img="afbeelding" moeten gebruiken omdat dat eigenlijk de HTML5/Bootstrap wijze is. Het allerbeste zou zijn als je dit vervolgens met een AJAX-call zou afhandelen. Een voorbeeld hier: https://www.codobyte.com/pim/ en wijzigen de Taalkeuze in de menubalk. Mocht je iets van script nodig hebben, laat maar weten. Dit is slechts een testpagina, dus de content is onzin.
Gewijzigd op 28/01/2021 10:45:22 door Cor Zelf
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.