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
Dansk iværksætter står bag et af Europas hurtigst voksende it-selskaber: Her er hele historien om hans op- og nedture
Det danske it-selskab Anytech365 leverer så høje vækstrater, at det er kommet med på Financial Times liste over de hurtigst voksende virksomheder i Europa. Her er historien om den danske iværksætter Janus Rægaard Nielsen, der har to konkurser bag sig og leder virksomheden fra Marbella.
CIO
SAP's nye nordiske direktør: "De seneste uger har jeg besøgt en del kunder her i Norden - og alle talte om at vende tilbage til en eller anden form for standard."
Det store ryk til cloud brød med mange års it-konsolidering og skabte komplicerede it-miljøer. Men nu peger kundernes kompas den anden vej, fortæller erfaren SAP-boss efter nordisk rundrejse.
White paper
Markedsanalyse: Sådan forbedrer EDI din samhandel
I en markedsundersøgelse fra august 2018 blev 300 retailers og producenter spurgt til, hvordan EDI og supply chain-teknologi hjælper dem med at forbedre deres samhandel. Det er ikke nogen hemmelighed, at konkurrenceforholdene er blevet skærpet i det seneste årti, og specielt priserne er udsat for øget pres. Dette betyder, at virksomheder hele tiden skal arbejde for at implementere mere effektive handelsprocesser. Heldigvis er der stadig forretningsområder, som er nemme at strømline ved hjælp af intelligente outsourcede løsninger. Ét af disse er den elektroniske udveksling af ordrer og fakturaer (EDI). I dette whitepaper kigger vi nærmere på de fem vigtigste områder, hvor EDI ifølge de 300 respondenter spiller en stor rolle i at forbedre virksomhedernes samhandel.