HTML <input type = 'file'> Evento de selección de archivo

144

Digamos que tenemos este código:

<form action='' method='POST' enctype='multipart/form-data'>
    <input type='file' name='userFile'><br>
    <input type='submit' name='upload_btn' value='upload'>
</form>

lo que resulta en esto:

imagen que muestra el botón de navegación y carga

Cuando el usuario hace clic en el botón 'Examinar ...', se abre un cuadro de diálogo de búsqueda de archivos:

imagen que muestra un cuadro de diálogo de búsqueda de archivos con un archivo seleccionado

El usuario seleccionará el archivo haciendo doble clic en el archivo o haciendo clic en el botón 'Abrir'.

¿Hay algún evento de Javascript que pueda usar para recibir una notificación después de seleccionar el archivo?

javascript html javascript-events

— Luna
fuente

66

¡Qué vieja interfaz de usuario de Windows!

— El-Burritos

@ El-Burritos esto fue publicado en 2010; por supuesto, es una vieja interfaz de usuario de Windows: D

— Simon Cheng

181

Escucha el evento de cambio.

input.onchange = function(e) { 
  ..
};

— Anurag
fuente

3

vamos a escribirlo donde ... en las etiquetas de script javascript

— Luna

55

sí en las etiquetas de script, o podría agregarlo como un atributo ( <input type="file" onchange="..." />) aunque esto no se recomienda.

— Anurag

77

Tenga en cuenta que en IE7 y 8 el evento de 'cambio' no se propaga al evento de formulario. Debe poner su oyente en la etiqueta <input>.

— xer0x

36

¿Qué pasa si un usuario necesita "recargar" un archivo? onchange no se activará, pero aún así debería recargarse como si lo estuviera cargando por primera vez.

— bryc

11

Tenga en cuenta que esto no funciona si el usuario elige el mismo archivo más de una vez seguidas, ya que el archivo no cambió.

— bob0the0mighty

46

Cuando tiene que volver a cargar el archivo, puede borrar el valor de entrada. La próxima vez que agregue un archivo, se activará el evento 'al cambiar'.

document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick

— Ayunarse
fuente

55

Eso funciona bien, pero tenga en cuenta el comportamiento extraño de IE <11. No le permite cambiar el valor de entrada, por lo que lo más probable es que necesite una solución alternativa. stackoverflow.com/questions/9011644/…

— Oleksandr Tkalenko

15

Forma jQuery:

$('input[name=myInputName]').change(function(ev) {

    // your code
});

— Zanon
fuente

4

Se llama al evento Change incluso si hace clic en cancelar.

— Antonio
fuente

2

Sería útil si proporcionara algún código para explicar su respuesta, ya que no hay ningún evento de cambio mencionado en el fragmento de código de Preguntas

— DevDig

Creo que @anthony se refiere al siguiente escenario: Seleccione un archivo. Ahora abra el selector de archivos nuevamente, pero esta vez haga clic en Cancelar. Como no se seleccionó ningún archivo la segunda vez, el control de entrada de archivo se restablece, cambiando así su selección inicial, y se activa el evento de cambio.

— dvlsc

Lo probé en Chrome 83 y el evento no se activa cuando hago clic en el botón Cancelar. Esta respuesta es bastante antigua y supongo que debe haberse solucionado, al menos en Chrome.

— Saeed Ahadian

3

Así lo hice con JS puro:

var files = document.getElementById('filePoster');
var submit = document.getElementById('submitFiles');
var warning = document.getElementById('warning');
files.addEventListener("change", function () {
  if (files.files.length > 10) {
    submit.disabled = true;
    warning.classList += "warn"
    return;
  }
  submit.disabled = false;
});

#warning {
    text-align: center;
}

#warning.warn {
	color: red;
	transform: scale(1.5);
	transition: 1s all;
}

<section id="shortcode-5" class="shortcode-5 pb-50">
    <p id="warning">Please do not upload more than 10 images at once.</p>
    <form class="imagePoster" enctype="multipart/form-data" action="/gallery/imagePoster" method="post">
        <div class="input-group">
  	    <input id="filePoster" type="file" class="form-control" name="photo" required="required" multiple="multiple" />
	    <button id="submitFiles" class="btn btn-primary" type="submit" name="button">Submit</button>
        </div>
    </form>
</section>

Expandir fragmento

— RegarBoy
fuente