riefart Mester
15. april 2019 - 00:01 Der er 5 kommentarer og
2 løsninger

Ændring af <input=file>-felt

Jeg har hentet følgende kode fra https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ i mit forsøg på at lave en lidt pænere fil-opload-knap. Dog får jeg ikke navnet på den oploadede fil printet. Hvad gør jeg galt?

  <style>
.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}     
.inputfile + label {
    font-size: 1.25em;
    font-weight: 700;
    color: white;
    background-color: black;
    display: inline-block;
}

.inputfile:focus + label,
.inputfile + label:hover {
    background-color: red;
}
.inputfile + label {
    cursor: pointer; /* "hand" cursor */
}
.inputfile:focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

    </style>
   
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Opload en fil</label>
   
<script>
var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
{
    var label    = input.nextElementSibling,
        labelVal = label.innerHTML;

    input.addEventListener( 'change', function( e )
    {
        var fileName = '';
        if( this.files && this.files.length > 1 )
            fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
        else
            fileName = e.target.value.split( '\' ).pop();

        if( fileName )
            label.querySelector( 'span' ).innerHTML = fileName;
        else
            label.innerHTML = labelVal;
    });
});   
</script>
Slater Ekspert
15. april 2019 - 10:17 #1
Der er en lille fejl i koden i linjen
fileName = e.target.value.split( '\' ).pop();

'\' skal være '\\' - ellers escaper den bare apostroffen til sidst.

Og så forsøger den at udskrive filnavnet til en span der er inde i din label, men sådan en har du ikke i din HTML.

Du kan se eksemplet virke her: http://snip.kilolima.dk/#/PFP3cZE
riefart Mester
15. april 2019 - 22:23 #2
->Slater.
Jeg kan se hvad du mener. Tak for hjælpen. Kan jeg ændre noget i opsætningen, så jeg bruger den manglende <span> effektivt, således, at "chose a file" erstattes af navnet på den valgte fil?
Slater Ekspert
16. april 2019 - 07:34 #3
Det er let nok, så fjerner du bare ".querySelector( 'span' )" fra koden, som leder efter en span inde i din label.

Jeg har opdateret eksemplet: http://snip.kilolima.dk/#/PFP3cZE
riefart Mester
16. april 2019 - 08:37 #4
Super. Tak for hjælpen. Det virker jo helt perfekt nu. God påske.
riefart Mester
16. april 2019 - 09:59 #5
En sidste ting fra spørgejørgen: Er det muligt at have 2 felter til opload i samme form med samme opsætning som ovenstående? Har prøvet lidt men strander på id=file, som jeg ikke kan ændre uden at smadre det hele.
Slater Ekspert
16. april 2019 - 11:00 #6
Det kan du sagtens. Det eneste id="file" bruges til er at fortælle din label hvilken input den hører til. Der skal altså være et id, men det er ligegyldigt hvad det er.

Så hvis du har to af dem, kan du bare f.eks. gøre:

<input id="file1">
<label for="file1"></label>

<input id="file2">
<label for="file2"></label>
riefart Mester
16. april 2019 - 12:38 #7
Igen mange tak. Nu er alt som det skal være. :-)
Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links

Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester





Premium
Region Nordjylland vælger Systematic som leverandør af stort EPJ-system: Danmarks EPJ-landskab nu reelt delt i to
Region Nordjylland vælger Systematic som leverandør af regionens kommende EPJ-løsning. Med beslutningen er Danmark nu reelt delt op i to på EPJ-området. “Det giver god mening,” siger regionsrådsformand. Se her, hvor mange brugere Systematic-systemet Columna nu står til at få i Danmark.
Computerworld
Google tvinger stort skifte igennem: Alle Android-telefoner skal kunne bruge sms’ens afløser
Google vil ikke vente på teleoperatørerne længere. Nu slipper selskabets RCS-teknologien løs på Android-platformen.
Job & Karriere
På jagt efter et nyt ingeniør-job? Her er otte attraktive stillinger, der er ledige netop nu
Find dit nye ingeniørjob her. Lige nu er der ledige stillinger hos blandt andet E-boks, Milestone Systems og Georg Jensen.
White paper
Hvad gør du? Printsikkerhed er en trussel for din virksomhed!
Du tænker nok: Er printere virkelig så stort en sikkerhedstrussel? På mange måder ja, for i en tid med konstante angreb, er en printer et nemt og ofte overset mål. Blandt andet viser undersøgelsen i dette whitepaper, at der er 68% større sandsynlighed for at printere er kilden til en ekstern trussel eller brist, end der var i 2016, og hele 118% større sandsynlighed for sker internt. Med dette in mente er det overraskende, at kun 30% af de adspurgte it-professionelle anerkender at printere udgør en sikkerhedsrisiko. Læs dette whitepaper og bliv klar over hvad det er du skal være opmærksom på.