Pages

Monday 19 November 2018

Cara membatasi Tipe File Upload dengan tag HTML

Hai, selamat datang di blog saya. Pada kesempatan kali ini saya akan berbagi tutorial Cara membatasi Tipe File Upload dengan tag HTML. Setelah sebelumnya kita sudah membahas cara upload file dengan PHP. Jadi untuk tutorial kali ini kita akan sebatas membuat form saja, tidak sampai proses upload dengan PHP.

Dengan cara ini nantinya ketika kita klik form untuk file, maka file yang akan tampil saat kita browse hanyalah sesuai tipe yang kita tentukan. Misalnya hanya JPG, PNG atau PDF saja.
Langsung saja pada langkahnya. Kita siapkan halaman yang berisi form. Buat file di bawah ini dengan nama upload.html

<html>
<head>
<title>Alfaruq – Cara membatasi tipe file upload</title>
</head>
<body>
<form action="" method="" enctype="multipart/form-data">
Semua file :
<input type="file" name="unggah1"><br/>
Semua gambar :
<input type="file" accept=”image/*” name="unggah2"><br/>
Gambar PNG :
<input type="file" accept=”image/png” name="unggah3"><br/>
File PDF :
<input type="file" accept=”application/pdf” name="unggah4"><br/>
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-default">Upload</button>
</form>
</body>
</html>

Perhatikan ada tag “accept” dan di dalamnya ada tipe file yang kita batasi. Itulah yang membuat file pada saat browser hanya tampil dengan ekstensi tertentu.



Cobalah dengan mengklik satu per satu form file di atas.
Misalkan untuk semua file maka yang akan tampil adalah semua tipe file seperti berikut.

Bandingkan ketika yang di klik adalah form gambar PNG. Ini ada di direktori yang sama, tetapi tipe selain PNG tidak muncul.


Cobalah untuk mengklik form lainnya juga dan lihat hasilnya.
Itulah cara membatasi tipe file melalui tag HTML. Mudah dan singkat bukan? Sekian dulu tutorial saya kali ini, semoga bermanfaat 
Jangan lupa share jika bermanfaat, dan komen jika ingin bertanya.
Anda juga dapat bertanya pada nomor yang berada di iklan DESAIN GRAFIS di bagian sidebar blog.


kalender 2019 murah, bikin kalender, desain kalender 2019, kalender jogja
Jasa Desain Grafis & Cetak Jogja

0 comments:

Post a Comment