Come ottenere il nome del file quando l'utente seleziona un file tramite <input type = "file" />?

Ho già visto domande simili, che non hanno soluzione, per motivi di sicurezza.Come ottenere il nome del file quando l'utente seleziona un file tramite <input type = "file" />?

Ma oggi vedo che hostmonster ha implementato con successo questo, quando apro un ticket e allego un file nel loro back-end.

Funziona con Firefox e IE (versione 8 per la precisione).

Ho verificato che è esattamente script sul lato client, nessuna richiesta viene inviata (con firebug).

Ora, possiamo ri-considerare questa domanda?

fonte

2010-02-03 user198729

Che cosa si intende da "ottenere un nome di file"? Il nome del file non è ovvio, perché l'utente l'ha appena selezionato? –

È possibile ottenere il nome di file, ma non è possibile ottenere il percorso completo del file system del client.

Provare ad accedere all'attributo value del file input per l'evento change.

maggior parte dei browser vi darà solo il nome del file, ma ci sono eccezioni, come IE8 che vi darà un falso percorso simile: "C:\fakepath\myfile.ext" e versioni precedenti (IE < = 6), che in realtà vi darà il percorso completo del file system del client (a causa della sua mancanza di sicurezza).

document.getElementById('fileInput').onchange = function() { alert('Selected file: ' + this.value); };

fonte

2010-02-03 04:27:52 CMS

Sto ottenendo 'C: \ fakepath \ ...' in chrome, ma va bene per i miei scopi. Grazie. – Squirrl

Si tratta di motivi di sicurezza. I siti Web non devono imparare il percorso della cartella dell'utente. – kodmanyagha

+29

Può pulirlo in questo modo: 'f = f.replace (/.*[\/\\]/, '');' –

appena testato fare questo e sembra funzionare in Firefox & IE

<html> 
    <head> 
     <script type="text/javascript"> 
      function alertFilename() 
      { 
       var thefile = document.getElementById('thefile'); 
       alert(thefile.value); 
      } 
     </script> 
    </head> 
    <body> 
     <form> 
      <input type="file" id="thefile" onchange="alertFilename()" /> 
      <input type="button" onclick="alertFilename()" value="alert" /> 
     </form> 
    </body> 
</html>

fonte

2010-02-03 04:32:46

Questo è interessante. Quando lo faccio ricevo 'C: \ fakepath \ background.jpg'. Letteralmente quello. –

Risponderò a questa domanda tramite semplice Javascript che è supportato in tutti i browser che ho testato finora (da IE8 a IE11, Chrome, FF ecc.).

Questo è il codice.

function GetFileSizeNameAndType() 
 
     { 
 
     var fi = document.getElementById('file'); // GET THE FILE INPUT AS VARIABLE. 
 

 
     var totalFileSize = 0; 
 

 
     // VALIDATE OR CHECK IF ANY FILE IS SELECTED. 
 
     if (fi.files.length > 0) 
 
     { 
 
      // RUN A LOOP TO CHECK EACH SELECTED FILE. 
 
      for (var i = 0; i <= fi.files.length - 1; i++) 
 
      { 
 
       //ACCESS THE SIZE PROPERTY OF THE ITEM OBJECT IN FILES COLLECTION. IN THIS WAY ALSO GET OTHER PROPERTIES LIKE FILENAME AND FILETYPE 
 
       var fsize = fi.files.item(i).size; 
 
       totalFileSize = totalFileSize + fsize; 
 
       document.getElementById('fp').innerHTML = 
 
       document.getElementById('fp').innerHTML 
 
       + 
 
       '<br /> ' + 'File Name is <b>' + fi.files.item(i).name 
 
       + 
 
       '</b> and Size is <b>' + Math.round((fsize/1024)) //DEFAULT SIZE IS IN BYTES SO WE DIVIDING BY 1024 TO CONVERT IT IN KB 
 
       + 
 
       '</b> KB and File Type is <b>' + fi.files.item(i).type + "</b>."; 
 
      } 
 
     } 
 
     document.getElementById('divTotalSize').innerHTML = "Total File(s) Size is <b>" + Math.round(totalFileSize/1024) + "</b> KB"; 
 
    }

<p> 
 
     <input type="file" id="file" multiple onchange="GetFileSizeNameAndType()" /> 
 
    </p> 
 

 
    <div id="fp"></div> 
 
    <p> 
 
     <div id="divTotalSize"></div> 
 
    </p>

* Si prega di notare che noi mostriamo la dimensione del file in KB (kilobyte). Per entrare in MB dividerlo per 1024 * 1024 e così via *.

Sarà eseguire le uscite di file come questi sulla selezione

fonte

2017-03-18 17:18:08 vibs2006

È possibile utilizzare il codice seguente:

function showname() { 
     var name = document.getElementById('fileInput'); 
     alert('Selected file: ' + name.files.item(0).name); 
     alert('Selected file: ' + name.files.item(0).size); 
     alert('Selected file: ' + name.files.item(0).type); 
    };

HTML

<body> 
    <p> 
     <input type="file" id="fileInput" multiple onchange="showname()"/> 
    </p>  
</body>

fonte

2017-04-04 14:09:24

Ecco fatto! Grazie. – Andrey

Come ottenere il nome del file quando l'utente seleziona un file tramite <input type = "file" />?

risposta

Problemi correlati