JQuery Upload File Ajax

By -
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

JQuery Upload File Ajax

2. Tampilan "Code Behind" untuk upload file

JQuery Upload File Ajax

JQuery Upload File Ajax

3. 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.

Popular posts from this blog

K2 Error Value Cannot Be Null. Parameter Name: s In SmartView and SmartObject

By -
Jika kamu pernah menemukan error " K2 Designer Error Value Cannot Be Null.  Parameter Name: s " pada saat melakukan execute SmartObject atau pada saat membuka SmartObject maupun SmartView . Biasanya error tersebut terjadi setelah kita melakukan Deploy menggunakan pilihan create new SmartObject tetapi kita lupa untuk menambahkan Stored Procedure pada database dan SmartObject terlanjur terbuat tetapi tidak merefer ke Stored Procedure manapun. Setelah kita tambahkan Stored Procedure  dan melakukan Deploy ulang tetapi rror diatas masih terjadi, maka refresh Database instance melalui K2SmartObject tester agar Stored Procedure  yang baru kita tambahkan dikenal oleh K2. Semoga posting tentang " K2 Error Value Cannot Be Null.  Parameter Name: s " diatas dapat bermanfaat. Salam,
Read more

Cara inject USB 3.0 Driver pada instalasi Windows - How to Inject USB 3.0 Driver in Windows 7

By -
Image
Beberapa laptop belakangan ini sudah menggunakan USB 3.0 daripada USB 2.0. Namun kebanyakan versi windows yang ada adalah menggunakan driver USB 2.0 sehingga saat instalasi akan diminta driver USB 3.0 sebelum melakukan partisi hardisk. Tanpa itu, tidak bisa melanjutkan instalasi. Berikut adalah cara untuk inject driver USB 3.0 ke file installer Windows yang sudah kalian punya. Sebelum melakukan injeksi, terlebih dahulu download driver USB 3.0 sesuai dengan merk dan tipe laptop yang ada. Jika ragu dengan merk laptop, bisa download driver USB 3.0 sebanyak mungkin. Create folder pada tempat yang mudah di akses, hal ini dilakukan untuk mempercepat proses dan mempunyai copy file jika gagal (misalnya C:\ubs3) Create folder mount di dalam folder yang sudah dibuat tadi Extract driver ke folder di dalamnya (misal C:\usb3\driver) Selanjutnya, kita perlu file yang digunakan untuk menginject driver ke dalamnya. Masuk ke Flashdisk dan copy file boot.wim dan install.wim ke folder y...
Read more

Pentaho Spoon Error : "Could Not Create The Java Virtual Machine"

By -
Image
Apakah Anda salah satu pengguna Pentaho? Jika Anda menginginkan software gratis untuk melakukan integrasi data maka Pentaho adalah salah satu pilihan yang dapat dijadikan acuan. Selain itu Pentaho juga tersedia dalam sistem operasi Windows maupun Linux. Untuk menjalankan Pentaho kita tidak perlu melakukan instalasi melainkan cukup dengan menjalankan file spoon.bat . Namun seringkali terjadi error  saat menjalankan Pentaho, yang umum terjadi adalah belum adanya instalasi Java di komputer. Java diperlukan karena Pentaho memerlukan JRE milik Java agar aplikasi Pentaho dapat berjalan. Jika JAVA telah diinstal tetapi masih muncul pesan error " Could Not Create The Java Virtual Machine " maka edit file spoon.bat dan cari bagian Pentaho Java Options. Seperti terlihat pada settingan di bawah ini. if "%PENTAHO_DI_JAVA_OPTIONS%"=="" set PENTAHO_DI_JAVA_OPTIONS="-Xmx8192m" "-XX:MaxPermSize=2048m" Ubahlah baris script diatas menjad...
Read more