Web Service, SharePoint, Web Service, CMS Tips, ASP.NET, Web Service Tutorial, SharePoint Tutorial, Web Service Tutorial, Affiliate Tutorial, CMS Tutorial, ASP.NET Tutorial

DARI MASA KE MASA

Tuesday, January 26, 2010

JQuery Upload File Ajax


Fungsi upload file ke database server adalah salah 1 fitur yang banyak dipakai didalam aplikasi berbasis desktop maupun web.

Pada posting JQuery File Upload  kali ini saya akan berikan contoh skrip dan tips untuk melakukan upload file pada aplikasi berbasis Web dengan memanfaatkan JQuery. Pertanyaanya mengapa kita menggunakan JQuery? Alasannya adalah agar proses upload lebih intraktif dan proses upload dapat dilakukan di page lain sehingga halaman utama tidak perlu postback.

Penggunaan JQuery dikombinasikan dengan code behind asp.net ini mempermudah kita dalam melakukan upload file secara massal. Meskipun demikian pada saat upload kita masih harus melakukan postback 1 halaman penuh, inilah yang jadi kendala apabila kita melakukan postback dengan halaman yang penuh dengan aksesoris dan lain-lain. Halaman dengan tampilan "menor" akan mengakibatkan data yang dikirim akan bertambah besar. Pertanyaannya adalah bagaimana cara untuk mengakali hal ini?

Anda bisa melihat gambar-gambar dibawah ini sebagai sample :

1. Tampilan Form Web Pertama

JQuery Upload File Ajax

2. Tampilan Saat Tombol "Upload File" diklik

JQuery Upload File Ajax

3. Tampilan Upload Form

JQuery Upload File Ajax

4. Tampilan "Code Behind" untuk upload file

JQuery Upload File Ajax

JQuery Upload File Ajax

5. Struktur Tabel untuk menyimpan file gambar

JQuery Upload File Ajax

Dari gambar-gambar diatas, skenario tampilan adalah saat pertama kali form dibuka yang muncul adalah gambar no 1, disitu kita masukkan nama dan kita lanjutkan dengan melakukan klik pada tombol upload file kemudian memuncul form dalam ukuran yang lebih kecil berupa popup window yang digunakan untuk melakukan upload file. Di form upload file tersebut terlihat bahwa nama yang kita ketikkan di halaman pertama tadi juga di tampilkan di form upload file.

Di gambar nomor 2, kita dapat memilih file dengan cara klik tombol browse, maka file-file yang telah kita pilih akan muncul berurutan dibawahnya, lihat gambar nomor 3.

Setelah itu kita dapat melakukan upload file dan disimpan ke dalam Database yang sudah disiapkan. Penyimpanan file tersebut dalam format binary, contoh kode untuk menyimpan file dalam format binary dapat dilihat pada gambar nomor 4.

Sedangkan gambar nomor 5 adalah struktur tabel yang digunakan untuk menyimpan file-file yang telah kita upload.

Pada saat kita melakukan Upload File dengan JQuery ini, halaman akan melakukan postback ke server. Bisa dibayangkan jika halaman web kita penuh dengan objek-objek dan gambar-gambar, maka semua halaman itu akan dikirim ke server ditambah dengan file-file yang kita upload, pasti akan banyak menyita bandwidth kan. Oleh karena itu, sebaiknya kita siapkan sendiri form untuk upload dengan tampilan yang minimal sehingga pada saat postback jumlah data yang dikirim akan lebih kecil.

Semoga posting artikel JQuery Upload File Ajax diatas dapat bermanfaat.



Salam.