Selamat sore teman – teman, hari ini saya kembali menulis pada kategori java script untuk menepati janji saya untuk menulis tutorial mengenai bagaimana cara memanipulasi tampilan input type file yang secara bawaan css tidak dapat melakukan perubahan tampilan pada input type file tersebut, tetapi dengan bahasa pemrograman java script, saya dapat memanipulasi tampilan input type file tersebut, untuk lebih jelasnya silahkan simak langkah – langkahnya sebagai berikut:
Buka editor teks favorit anda, saya sendiri menggunakan editor teks Codelobster PHP Edition kemudian buatkanlah sebuah dokumen .html baru
Lalu ketikan kode dibawah ini:
<html>
<head>
<title>Manipulasi Tampilan Input File</title>
<script type="text/javascript">
function browse() {
document.getElementById("file").click();
}
</script>
<style>
#file {
display: none;
}
input[type="button"] {
width: 80px;
height: 30px;
border: 1px solid #1f3cd0;
background-color: #204be1;
color: #ffffff;
text-shadow: 1px 1px 0.5px #ffffff;
border-radius: 4px;
}
</style>
</head>
<body>
<h2>Manipulasi Tampilan Input File</h2>
<form method="POST" enctype="multipart/form-data">
<input type="file" id="file"/>
<input type="button" value="Browse" onclick="browse()"/>
</form>
</body>
</html>
Simpan dengan nama file.html
Jalankan file.html pada web browser
Jika berhasil tampilannya akan seperti gambar berikut:
Gambar : tampilan hasil akhir program
Jika tombol Browse ditekan akan muncul jendela File Upload
Demikian artikel saya untuk hari ini, semoga artikel yang saya bagikan kali ini dapat membantu para teman – teman pengunjung blog ini, tunggu artikel – artikel menarik saya yang selanjutnya, jika ada hal yang ingin ditanyakan silahkan meninggalkan komentar anda.
0 Comments:
Post a Comment