HTML <input type = 'file'> Evento di selezione file

144

Diciamo che abbiamo 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 risulta in questo:

immagine che mostra il pulsante Sfoglia e carica

Quando l'utente fa clic sul pulsante "Sfoglia ...", viene aperta una finestra di dialogo per la ricerca dei file:

immagine che mostra una finestra di dialogo per la ricerca dei file con un file selezionato

L'utente selezionerà 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 aver selezionato il file?

javascript html javascript-events

— Luna
fonte

6

Che vecchia interfaccia utente di Windows funky!

— El-Burritos,

@ El-Burritos questo è stato pubblicato nel 2010; ovviamente, è una vecchia interfaccia utente di Windows: D

— Simon Cheng,

181

Ascolta l'evento change.

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

— Anurag
fonte

3

lo scriveremo dove .. nei tag di script javascript

— Luna

5

sì nei tag script, oppure potresti aggiungerlo come attributo ( <input type="file" onchange="..." />) anche se questo non è raccomandato.

— Anurag,

7

Si noti che in IE7 e 8 che l'evento 'change' non passa all'evento form. Devi mettere il tuo listener sul tag <input>.

— xer0x,

36

Che dire se un utente deve "ricaricare" un file? onchange non si innescherà, ma dovrebbe comunque ricaricarsi come se lo stesse caricando per la prima volta.

— bryc

11

Nota, questo non funziona se l'utente seleziona lo stesso file più di una volta di seguito poiché il file non è cambiato.

— bob0the0mighty,

46

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

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

— Clem
fonte

5

Funziona bene ma sii consapevole del comportamento strano di IE <11. Non ti consente di modificare il valore dell'input, quindi molto probabilmente avrai bisogno di una soluzione alternativa. stackoverflow.com/questions/9011644/...

— Oleksandr Tkalenko

15

modo jQuery:

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

    // your code
});

— Zanon
fonte

4

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

— anthony
fonte

2

sarebbe utile se

— fornissi

Penso che @anthony si riferisca al seguente scenario: Seleziona un file. Ora apri di nuovo il selettore di file, ma questa volta fai clic su Annulla. Poiché non è stato selezionato alcun file la seconda volta, il controllo di input del file viene ripristinato, modificando così la selezione iniziale e l'evento di modifica viene generato.

— dvlsc,

L'ho provato su Chrome 83 e l'evento non viene generato quando faccio clic sul pulsante Annulla. Questa risposta è piuttosto vecchia e immagino che debba essere stata risolta, almeno su Chrome.

— Saeed Ahadian,

3

È così che l'ho fatto 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>

Espandi frammento

— RegarBoy
fonte