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 Upload Form
2. Tampilan "Code Behind" untuk upload file
3. Struktur Tabel untuk menyimpan file gambar
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.
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 Upload Form
2. Tampilan "Code Behind" untuk upload file
3. Struktur Tabel untuk menyimpan file gambar
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.
