Menambahkan file field dengan jQuery
Jika kita googling ‘adding file field into form with jquery’ maka muncul beberapa hasil relevan yang menggunakan metode cukup rumit hanya untuk menambahkan file field ke dalam sebuah form upload.
Hmm.. Bisakah lebih simpel lagi?
Mari kita praktekkan bersama. Kita buat form upload seperti dibawah ini, jangan lupa memasukkan jQuery sebelumnya.
<form method="post" action="">
<label for="file_upload">File(s) :</label>
<input type="file" name="file_upload[]" id="file_upload" />
<input type="submit" name="upload" value="Upload!" />
</form>
Lihat id dari file field diatas, itu yang menjadi penanda untuk tambahan file field selanjutnya.
Berikutnya kita ‘pasang’ jQuery untuk menambahkan file field secara dinamis :
$(function() {
$('label').click(function() {
$('#file_upload').removeAttr('id').after('<input type="file" name="file_upload[]" id="file_upload" />');
});
});
Yang maksudnya seperti ini :
- Jika pengguna meng-klik label maka cari file field yang ber-id ‘file_upload’
- Hapus attribut id dari field tersebut
- Tambahkan file field baru dengan id ‘file_upload’
Mungkin ada yang bertanya, kenapa tidak pakai fungsi .clone() saja? Atau kenapa harus pakai atribut id?
Jika kita pakai .clone(), namanya juga clone, tentu saja attribut value ikut di-clone :
$('#file_upload').clone().removeAttr('id').insertAfter('#file_upload');
Dan apabila tidak pakai atribut id :
$('input[type=file]').after('<input type="file" name="file_upload[]"');
Maka penambahan file field berubah menjadi perkalian file field dan judul pun akan berubah menjadi ‘Mengalikan file field dengan jQuery’