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

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?jQuery: obtenga el nombre de archivo seleccionado de <input type = "file" />

<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>

Fuente

2009-08-19 Anonymous

Compruebe mi respuesta, creo que es la mejor y más comprensible forma de lograr esto. – James111

141

Es simplemente tan simple como escribir:

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

De todos modos, se sugiere emplear el nombre o atributo ID para seleccionar la entrada. Y con caso, debe tener este aspecto: siguiente

$('input[type=file]').change(function(e){ 
    $in=$(this); 
    $in.next().html($in.val()); 
});

Fuente

2009-08-19 10:44:08 Thinker

¡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 da el nombre del archivo. –

@PHP Sacerdote, no puedes. Los navegadores no exponen ese tipo de información. – zneak

//get file input 
var $el = $('input[type=file]'); 
//set the next siblings (the span) text to the input value 
$el.next().text($el.val());

Fuente

2009-08-19 10:44:34 redsquare

que había usado el que funcionaba correctamente.

$('#fileAttached').attr('value', $('#attachment').val())

Fuente

2010-06-07 19:18:39 ihmar

Agregar 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();

Fuente

2011-12-22 20:59:13

¿Puedes hacer clic en un botón oculto? – DaveWalley

$('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 de archivo en Google Chrome en caso de utilizar .val().

Fuente

2014-02-12 18:44:00

<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>

Fuente

2014-12-10 09:45:32

Gracias! Esto fue útil para captar el nombre real del archivo cargado y no la ruta completa. –

Más Bienvenido Evan M –

La forma más sencilla es simplemente usar la siguiente línea de jquery, utilizando este no obtiene el sentido /fakepath, se obtiene directamente hacia arriba el archivo que se ha subido:

$('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 fichero:

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

para obtener el tipo del archivo:

Si tuviera que cargar un archivo PNG, devolverí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 utilizar estos comandos on('change', puede obtener los valores en cualquier momento, por ejemplo, puede tener una carga de archivo y cuando el uso Hace clic en upload, simplemente usa los comandos que enumeré.

Fuente

2015-11-26 01:59:03 James111

¿Por qué recibí el error No puedo leer la propiedad 'nombre' de indefinido? – Gagantous

-2

<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>

Fuente

2017-08-22 20:37:59

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

Respuesta

Cuestiones relacionadas