HTML <input type = 'archivo'> Selección archivo de eventos

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 se traduce en lo siguiente:

Cuando el usuario hace clic en 'Browse botón ...', 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'.

¿Existe un evento Javascript que pueda utilizarse para recibir una notificación después de que se haya seleccionado el archivo?

Answer 1

Escuche el evento de cambio.

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

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

jQuery manera:

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

    // your code 
}); 

Answer 4

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

Answer 5

Esa es la manera que lo hice con JS puros:

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 { 
 
\t color: red; 
 
\t transform: scale(1.5); 
 
\t 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"> 
 
    \t  <input id="filePoster" type="file" class="form-control" name="photo" required="required" multiple="multiple" /> 
 
\t  <button id="submitFiles" class="btn btn-primary" type="submit" name="button">Submit</button> 
 
     </div> 
 
    </form> 
 
</section>