Kamis, 01 Maret 2012

Video
Text

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

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]


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

Please share bila tutorial ini cukup berbobot untuk anda!

MediaTutorial mengedepankan tutorial yang berkualitas. Semua penjelasan dipaparkan sedetail mungkin.
Please, bila tutorial ini membantu anda dan cukup berkualitas bagi anda mohon untuk share pada button sharing berikut ini.

Writen by: Okie Eko Wardoyo

Comments