jQuery: obtenga el nombre del archivo seleccionado de <input type = "file" />

90

Este código debería funcionar en IE (ni siquiera lo pruebe en Firefox), pero no es así. Lo que quiero es mostrar el nombre del archivo adjunto. ¿Alguna ayuda?

<html>
<head>
  <title>example</title>    
  <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript">  
        $(document).ready( function(){            
      $("#attach").after("<input id='fakeAttach' type='button' value='attach a file' />");      
      $("#fakeAttach").click(function() {            
        $("#attach").click();        
        $("#maxSize").after("<div id='temporary'><span id='attachedFile'></span><input id='remove' type='button' value='remove' /></div>");        
        $('#attach').change(function(){
          $("#fakeAttach").attr("disabled","disabled");          
          $("#attachedFile").html($(this).val());
        });        
        $("#remove").click(function(e){
          e.preventDefault();
          $("#attach").replaceWith($("#attach").clone());
          $("#fakeAttach").attr("disabled","");
          $("#temporary").remove();
        });
      })
    }); 
  </script> 
</head>
<body>
  <input id="attach" type="file" /><span id="maxSize">(less than 1MB)</span>    
</body>
</html>
jquery events copy file-io
fuente
Verifique mi respuesta, creo que es la mejor y más comprensible forma de lograrlo.
James111

Respuestas:

147

Es tan simple como escribir:

$('input[type=file]').val()

De todos modos, sugiero usar el atributo de nombre o ID para seleccionar su entrada. Y con el evento, debería verse así:

$('input[type=file]').change(function(e){
  $in=$(this);
  $in.next().html($in.val());
});
Pensador
fuente
¡Gracias! Eso funcionó en el problema anterior (y simplificado) que planteé, pero no funciona en la versión extendida.
cómo obtener la ruta completa del archivo, el código anterior solo proporciona el nombre del archivo.
Khurram Ijaz
3
@PHP Priest, no puedes. Los navegadores no exponen ese tipo de información.
zneak
2
@PHP Priest, si pudiera hacer eso, podría transmitir subrepticiamente datos sobre el sistema de archivos del usuario a través de AJAX y el usuario probablemente nunca lo sabría. Imagínese cuánto peor sería si pudiera establecer mediante programación el valor de la entrada de un archivo. Si. Temas de seguridad.
jinglesthula
1
¿Esto parece un poco exagerado? La forma en que he enumerado es mucho más fácil y comprensible.
James111
20

La forma más sencilla es simplemente usar la siguiente línea de jquery, con esto no obtendrá las /fakepathtonterías, obtendrá directamente el archivo que se cargó:

$('input[type=file]')[0].files[0]; // This gets the file
$('#idOfFileUpload')[0].files[0]; // This gets the file with the specified id

Algunos otros comandos útiles son:

Para obtener el nombre del archivo:

$('input[type=file]')[0].files[0].name; // This gets the file name

Para obtener el tipo de archivo:

Si tuviera que cargar un PNG, volvería image/png

$("#imgUpload")[0].files[0].type

Para obtener el tamaño (en bytes) del archivo:

$("#imgUpload")[0].files[0].size

Además, no tiene que usar estos comandos on('change', puede obtener los valores en cualquier momento, por ejemplo, puede cargar un archivo y cuando el usuario hace clic upload, simplemente usa los comandos que enumeré.

James111
fuente
¿Por qué aparece el error No se puede leer la propiedad 'nombre' de indefinido?
Gagantous
19 
$('input[type=file]').change(function(e){
    $(this).parents('.parent-selector').find('.element-to-paste-filename').text(e.target.files[0].name);
});

Este código no se mostrará C:\fakepath\antes del nombre del archivo en Google Chrome en caso de usarlo .val().

Anatolii Pazhyn
fuente
4 
<input onchange="readURL(this);"  type="file" name="userfile" />
<img src="" id="blah"/>
<script>
 function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah')
                    .attr('src', e.target.result)
                    .width(150).height(200);
        };

        reader.readAsDataURL(input.files[0]);
        //console.log(reader);
        //alert(reader.readAsDataURL(input.files[0]));
    }
}
</script>
Anil Gupta
fuente
¡Gracias! Esto fue útil para obtener el nombre real del archivo cargado y no la ruta completa.
Evan M
3

Había usado lo siguiente que funcionaba correctamente. 

$('#fileAttached').attr('value', $('#attachment').val())
ihmar
fuente
2 
//get file input
var $el = $('input[type=file]');
//set the next siblings (the span) text to the input value 
$el.next().text( $el.val() );
cuadrado rojo
fuente
1

Agrega un botón de reinicio oculto:

<input id="Reset1" type="reset" value="reset" class="hidden" />

Haga clic en el botón de reinicio para borrar la entrada.

$("#Reset1").click();
daniel ye
fuente
1
¿Puedes hacer clic en un botón oculto?
DaveWalley
-1 
<input onchange="readURL(this);"  type="file" name="userfile" />
<img src="" id="viewImage"/>
<script>
 function readURL(fileName) {
    if (fileName.files && fileName.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#viewImage')
                    .attr('src', e.target.result)
                    .width(150).height(200);
        };

        reader.readAsDataURL(fileName.files[0]);
    }
}
</script>
Raghuraj Singh Gurjar
fuente
gracias hombre, estaba buscando esto, sé que este no es el tema, pero fue mi respuesta, ya sabes;)
Tarek.Eladly