Roep een 'file select object' aan via een bootstrap dropdown button?
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)
1
2
2
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
<input type="file" id="myfile" name="myfile">
Echter hoe zou ik dit nu kunnen aanpakken in de dropdown button?
Code (php)
1
2
3
4
5
6
7
8
9
10
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>
<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)
1
2
3
4
5
6
7
8
9
10
11
12
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">
<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)
1
2
3
2
3
$(".image").click(function(){ // Afbeelding wordt aangeklikt in dropdownmenu waardoor file select object wordt weergegeven
$("#s_file").trigger("click");
});
$("#s_file").trigger("click");
});
Gewijzigd op 21/01/2021 11:26:39 door Nicos Vermeulen
Gewijzigd op 28/01/2021 10:45:22 door Cor Zelf