Avatar billede riefart Seniormester
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>
Avatar billede 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
Avatar billede riefart Seniormester
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?
Avatar billede 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
Avatar billede riefart Seniormester
16. april 2019 - 08:37 #4
Super. Tak for hjælpen. Det virker jo helt perfekt nu. God påske.
Avatar billede riefart Seniormester
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.
Avatar billede 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>
Avatar billede riefart Seniormester
16. april 2019 - 12:38 #7
Igen mange tak. Nu er alt som det skal være. :-)
Avatar billede 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. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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