HTML <input type = 'file'> Acara Pemilihan File

148

Katakanlah kita memiliki kode ini:

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

yang menghasilkan ini:

gambar menunjukkan tombol jelajah dan unggah

Ketika pengguna mengklik tombol 'Jelajahi ...', kotak dialog pencarian file terbuka:

gambar yang menampilkan kotak dialog pencarian file dengan file yang dipilih

Pengguna akan memilih file baik dengan mengklik dua kali file atau dengan mengklik tombol 'Buka'.

Apakah ada Peristiwa Javascript yang dapat saya gunakan untuk diberi tahu setelah file dipilih?

javascript html javascript-events Bulan
sumber
9
UI windows lama yang funky!
El-Burritos
@ El-Burritos ini diposting pada tahun 2010; tentu saja, ini adalah UI Windows lama: D
Simon Cheng

Jawaban:

188

Dengarkan acara perubahan.

input.onchange = function(e) { 
  ..
};
Anurag
sumber
3
kita akan menulisnya di mana .. dalam tag skrip javascript
Bulan
5
yes dalam tag skrip, atau Anda dapat menambahkannya sebagai atribut ( <input type="file" onchange="..." />) meskipun ini tidak disarankan.
Anurag
7
Perhatikan bahwa di IE7 dan 8 bahwa acara 'ubah' tidak meluap ke acara formulir. Anda harus menempatkan pendengar Anda di tag <input>.
xer0x
40
Bagaimana jika pengguna perlu "memuat ulang" file? onchange tidak akan terpicu, tetapi masih harus memuat ulang seolah-olah sedang memuatnya untuk pertama kali.
bryc
13
Catatan, ini tidak berfungsi jika pengguna memilih file yang sama lebih dari sekali berturut-turut karena file tidak berubah.
bob0the0mighty
47

Saat Anda harus memuat ulang file, Anda dapat menghapus nilai input. Lain kali Anda menambahkan file, acara 'on change' akan terpicu.

document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick
Clem
sumber
5
Itu berfungsi dengan baik tetapi waspadai perilaku IE <11 yang aneh. Itu tidak memungkinkan Anda untuk mengubah nilai input, jadi kemungkinan besar Anda akan membutuhkan solusi. stackoverflow.com/questions/9011644/…
Oleksandr Tkalenko
15

jQuery cara:

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

    // your code
});
Zanon
sumber
4

Acara Ubah dipanggil meskipun Anda mengklik batal ..

anthony
sumber
2
akan membantu jika Anda memberikan beberapa kode untuk menjelaskan jawaban Anda, karena tidak ada peristiwa perubahan yang disebutkan dalam cuplikan kode Pertanyaan
DevDig
Saya pikir @anthony mengacu pada skenario berikut: Pilih file. Sekarang buka pemilih file lagi, tetapi kali ini klik Batal. Karena tidak ada file yang dipilih untuk kedua kalinya, kontrol input file disetel ulang, sehingga mengubah pemilihan awalnya, dan peristiwa perubahan diaktifkan.
dvlsc
Saya mencobanya di Chrome 83 dan acara tidak terpicu ketika saya mengklik tombol Batal. Jawaban ini cukup lama dan saya rasa itu pasti sudah diperbaiki, setidaknya di Chrome.
Saeed Ahadian
4

Itulah cara saya melakukannya dengan JS murni:

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>
Luaskan cuplikan

RegarBoy
sumber