CSS HTML No.14: Membuat drag and drop upload file dengan File Api Html5

comments

Pemirsa, jumpa kembali bersama Mediatutorial.web.id, pada kesempatan kali ini kita akan membahas tentang bagaimana cara membuat 'Drag and Drop Uploader'. Tutorial ini merupakan pengembangan dari tutorial sebelumnya yaitu [[CSS HTML No.11: Membuat Upload Files App dengan Html5, XHR 2, dan CORS]].
Ada baiknya anda kembali membuka tutorial sebelumnya diatas.

Metode drag and drop upload banyak digunakan pada situs situs besar seperti yahoo, google, youtube, dan lain lain. Nah, dalam drag and drop upload ini kita menggukanan Html5 dan native javascript yaitu Filereader dan RFC2388 sebagai decode multipart/form-data nya.
Kita disini menggunakan html5 karena hanya dengan html5 lah maka file file yang ada di local komputer dapat diakses.

App drag and drop upload ini hanya dapat berjalan bila browser anda mendukung html5 file api dan DnD (Drag and Drop) seperti ie 10+, Firefox 3.6+, Crhome 6+, Safari 6+, Opera 11.5+

Cara kerja App ini adalah:
1. Kita mendrag sebuah image file.Dalam proses ini maka kita akan mengenal yang namanya DnD Api. Api inilah yang nanti kita gunakan untuk ondragenter, ondrop dan lain lain.

2. Kemudian kita memanggil Datatransfer.files untuk mengkoleksi semua file yang didrop

3. Kemudian kita membaca sebagai binary dan lain lain silahkan tonton videonya (^^,)

Dalam tutorial ini kita akan membahas tentang:
1. DnD Api (Drag and Drop)
2. DataTransfer, getAsBinary, sendAsBinary, Boundary
3. Trick khusus RFC2388
4. File php untuk mengolah gambar

ANDA DAPAT MELIHAT TUTORIALNYA DI BAWAH INI
PART 1

PART 2 SILAHKAN [CLICK DI SINI]

View a live demo Download the source files

Video di atas dapat anda download dengan menggunakan IDM (Internet Download Manager) atau aplikasi downloader yang lain yang telah terinstall di komputer anda.