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

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Backend / full stack PHP developer met ervaring

Backend / full stack PHP developer met ervaring Wie wij zoeken Wij zoeken een ervaren PHP backend / full stack developerdie zelfstandig en gestructureerd werkt. Wat doen wij? Alflex Technologies ontwikkelt en produceert maatwerkelektronica (hardware en embedded software), mobiele apps, web- en PC-applicaties voor een hele brede markt (BtB). Unieke producten met functies als legionellabestrijding, corrosiebestrijding, smart building/ lightning, (medicijn)verpakkingsmachines, sensoring en nog veel meer. Deze producten worden steeds vaker voorzien van connectiviteit met behulp van LoRa, NB-IoT, LTE-M en zijn daarmee verbonden met het Internet (IoT). Dit stelt weer extra eisen op het gebied van dataverzameling, -ontsluiting en -presentatie

Bekijk vacature »

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

02/03/2021 15:22:58
 
Cor van Dooren

Cor van Dooren

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



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.