2011-04-14 60 views
166

Duplicar posibles:
jQuery: get the file name selected from <input type=“file” />jQuery - Detectar si un archivo ha sido seleccionado en el archivo de entrada

Tengo una caja de entrada de archivos estándar

<input type="file" name="imafile"> 

también tener un poco de texto en la página como

<span class="filename">Nothing selected</span> 

Me preguntaba si es posible tener la actualización de texto con el nombre del archivo seleccionado en el cuadro de entrada del archivo?

Saludos,

+4

@jnpcl - No creo que ese puesto está haciendo lo mismo que lo que quiere hacer – BigJobbies

+0

Muestra el 'nombre de archivo' del campo' '. ¿No es exactamente ** lo que quieres hacer? – drudge

+3

Quiere que se active un evento * cuando * el usuario selecciona un archivo. Esto es claramente diferente de obtener el nombre después de * saber * que se ha seleccionado un archivo. Como tal, esto no es un duplicado. – MetalPhoenix

Respuesta

254

Usted debe ser capaz de conectar un controlador de eventos para el evento onchange de la entrada y tener que llamar a una función para establecer el texto en su tramo.

<script type="text/javascript"> 
    $(function() { 
    $("input:file").change(function(){ 
     var fileName = $(this).val(); 
     $(".filename").html(fileName); 
    }); 
    }); 
</script> 

Es posible que desee agregar a su ID de entrada y la duración para que pueda seleccionar en base a los que es específica a los elementos que tienen que ver con las entradas y no otros archivos o vanos en el DOM.

+26

'onchange' no se llama si se seleccionó el mismo archivo nuevamente. ¿Cómo puedo superar esto ...? – shashwat

+1

@shashwat Puede usar live en lugar de change para solucionar este problema. Ejemplo: Cambiar el código de $ ("entrada: archivo"). Cambiar a $ ("entrada: archivo"). Live –

+7

@shashwat enlazar al evento de clic de la entrada y establecer el valor de las entradas a nulo. –

11

Sugiero probar el evento de cambio? prueba para ver si tiene un valor si lo hace, entonces puedes continuar con tu código. jQuery tiene

.bind("change", function(){ ... }); 

O

.change(function(){ ... }); 

que son equivalentes.

http://api.jquery.com/change/

de un selector única cambie el atributo de nombre de ID y luego jQuery("#imafile") o una jQuery('input[type="file"]') general para todas las entradas de archivos

Cuestiones relacionadas