Upload file merupakan salah satu fitur yang penting dalam sebuah aplikasi, file dapat berupa gambar, dokumen,dan lain sebagainya. Upload file yang akan saya bahas dalam artikel ini digunakan untuk aplikasi web yang menggunakan jquery. Kenapa menggunakan jquery? padahal kan cara biasa kan bisa pakai tag input?
Dengan cara biasa, kita tidak dapat mengubah letak tombol upload file ataupun style dan text untuk tulisan upload file, namun dengan jquery semua dapat dilakukan,,hahahhahaha. Disini saya akan jelaskan secara simpel saja, karena untuk pengembangannya kalian bisa rubah dan kembangkan sesuai kebutuhan masing-masing.
Baca Juga : Cara Membuat Preview Gambar Sebelum Diupload
Cara Membuat Tombol Hover Menarik
Baca Juga : Cara Membuat Preview Gambar Sebelum Diupload
Cara Membuat Tombol Hover Menarik
Ok, sesuai dengan judul artikel ini yaitu membuat button/tombol upload file, maka pasti disini kita akan menggunakan tombol.
*Tombol dapat diubah sesuai dengan kebutuhan, bisa pake gambar,tulisan,dan lain-lain sesuai keinginan...wkwkkwwk
Langsung saja buat file baru dengan format html kemudian salin kode berikut :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Button Upload</title>
</head>
<body>
<div style="display:none">
<input type="file" name="inputFile" id="inputFile">
</div>
<button style="height:50px;width:100px" type="button" id="btnFile">Pilih File Coy</button>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#btnFile').click(function(){
$('#inputFile').click();
});
});
</script>
</body>
</html>
Dari kodingan di atas, sebenarnya menggunakan sedikit trick yaitu menghide input file dengan style="display:none" , kemudian ketika button dengan id btnFile di klik maka langsung mengeksekusi input file dengan id inputFile.
contoh input biasa :
contoh dengna tombol jquery
Sekian artikel kali ini, jika ada yang belum dipahami bisa tinggalkan komentar dibawah ya..
No comments:
Post a Comment