type - jquery input file value

Método de cambio de jQuery en input type="file"

Question

Intento abarcar jQuery al 100% con su API simple y elegante, pero he encontrado una incoherencia entre la API y el HTML directo que no logro descifrar.

Tengo un script de carga de archivos AJAX (que funciona correctamente) que quiero ejecutar cada vez que cambia el valor de entrada del archivo. Aquí está mi código de trabajo:

<input type="file" size="45" name="imageFile" id="imageFile" onchange="uploadFile()">

Cuando convierto el evento onchange a una implementación jQuery:

$(''#imageFile'').change(function(){ uploadFile(); });

el resultado no es el mismo Con el atributo onchange se llama a la función uploadFile() cada vez que se cambia el valor como se espera. Pero con el controlador de eventos jQuery API .change() , el evento solo se dispara la primera vez que se cambia un valor. Cualquier cambio de valor después de eso se ignora. Esto me parece incorrecto, pero seguramente esto no puede ser un descuido de jQuery, ¿verdad?

¿Alguien más ha tenido el mismo problema y tiene una solución alternativa al problema que no sea la que describí anteriormente?

Answer 1

¿El cargador de Ajax está actualizando su elemento de entrada? si es así, debería considerar usar el método .live ().

 $(''#imageFile'').live(''change'', function(){ uploadFile(); });

actualizar:

desde jQuery 1.7+ deberías usar ahora .on ()

 $(parent_element_selector_here or document ).on(''change'',''#imageFile'' , function(){ uploadFile(); });

Answer 2

A partir de jQuery 1.7, el método .live () está en desuso. Use .on () para adjuntar manejadores de eventos. Los usuarios de versiones anteriores de jQuery deben usar .delegate () en preferencia a .live (). Consulte: http://api.jquery.com/on/

$(''#imageFile'').on("change", function(){ uploadFile(); });

Answer 3

No pude lograr que IE8 + funcionara al agregar un controlador de eventos jQuery al tipo de entrada de archivo. Tuve que ir a la vieja escuela y agregar el atributo onchange="" a la etiqueta de entrada:

<input type=''file'' onchange=''getFilename(this)''/>

function getFileName(elm) {
   var fn = $(elm).val();
   ....
}

EDITAR:

function getFileName(elm) {
   var fn = $(elm).val();
   var filename = fn.match(/[^///]*$/)[0]; // remove C:/fakename
   alert(filename);
}