HTML <input type = 'file'> Selezione File Evento

Question

Diciamo che abbiamo di questo codice:

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

che si traduce in questo:

Quando l'utente fa clic sul 'Sfoglia ... pulsante', una finestra di dialogo di ricerca file viene aperto:

L'utente seleziona il file facendo doppio clic sul file o facendo clic sul pulsante "Apri".

Esiste un evento Javascript che posso utilizzare per ricevere una notifica dopo la selezione del file?

Answer 1

Ascolta l'evento di modifica.

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

Answer 2

Quando è necessario ricaricare il file, è possibile cancellare il valore di input. La prossima volta che aggiungi un file, verrà attivato l'evento 'on change'. modo

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

Answer 3

jQuery:

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

    // your code 
}); 

Answer 4

L'evento Change viene chiamato anche se si fa clic su annullare ..

Answer 5

Questo è il modo in cui l'ho fatto con JS puri:

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>