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

input type file javascript

Question

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>

que resulta en esto:

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

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 luego de que se haya seleccionado el archivo?

Answer 1

Así es como 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>

Answer 2

Cuando tenga que volver a cargar el archivo, puede borrar el valor de la 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

Answer 3

El evento Change se llama incluso si haces clic en cancelar ..

Answer 4

Escucha el evento de cambio.

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

Answer 5

jQuery manera:

$(''input[name=myInputName]'').change(function(ev) {
// your code
});