¿Cómo obtener el nombre del archivo cuando el usuario selecciona un archivo a través de <input type = "file" />?

He visto preguntas similares antes, lo que termina sin solución, por razones de seguridad.¿Cómo obtener el nombre del archivo cuando el usuario selecciona un archivo a través de <input type = "file" />?

Pero hoy veo que hostmonster ha implementado esto con éxito, cuando abro un ticket y adjunto un archivo en su back-end.

Funciona tanto con Firefox como con IE (versión 8 para ser exactos).

He verificado que es exactamente scripting del lado del cliente, no se envía ninguna solicitud (con firebug).

Ahora, ¿podemos reconsiderar esta pregunta?

Fuente

2010-02-03 user198729

¿Qué quiere decir por "obtener un nombre de archivo"? ¿No es obvio el nombre del archivo porque el usuario acaba de seleccionarlo? –

Puede obtener el nombre de archivo , pero no puede obtener la ruta completa del sistema de archivos del cliente.

Intente acceder al atributo value de su archivo input en el evento change.

mayoría de los navegadores le dan sólo el nombre archivo, pero hay excepciones como IE8 que le dará un ruta falsa como: "C:\fakepath\myfile.ext" y versiones anteriores (IE < = 6) que en realidad le dará la ruta completa del sistema de archivos del cliente (debido a su falta de seguridad).

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

Fuente

2010-02-03 04:27:52 CMS

Obtengo 'C: \ fakepath \ ...' en Chrome, pero está bien para mis propósitos. Gracias. – Squirrl

Esto se trata de razones de seguridad. Los sitios web no deben conocer la ruta de la carpeta del usuario. – kodmanyagha

+29

Puede limpiarlo de esta manera: 'f = f.replace (/.*[\/\\]/, '');' –

acabo de probar hacer esto y parece que funciona en 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>

Fuente

2010-02-03 04:32:46

Eso es interesante. Cuando lo hago, obtengo 'C: \ fakepath \ background.jpg'. Literalmente eso. –

Voy a responder a esta pregunta a través de simple Javascript que se admite en todos los navegadores que he probado hasta ahora (IE8 a IE11, Chrome, FF, etc.).

Aquí está el código.

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>

* Tenga en cuenta que estamos mostrando tamaño del archivo en KB (kilobytes). Para obtener MB, divídalo por 1024 * 1024 y así sucesivamente *.

Se va a realizar salidas de archivos como estos en la selección de

Fuente

2017-03-18 17:18:08 vibs2006

Se puede utilizar el siguiente código:

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>

Fuente

2017-04-04 14:09:24

¡Eso es todo! Gracias. – Andrey

¿Cómo obtener el nombre del archivo cuando el usuario selecciona un archivo a través de <input type = "file" />?

Respuesta

Cuestiones relacionadas