One Click Upload File pada JSP (Java Server Pages)
Disini aku mencoba mengembangkan dan memodifikasi hasil surfing bersama om google untuk teknik “One Click Upload File“. Aku menggunakan JQuery untuk membuat teknik tersebut pada clientside, sebagaimana kita ketahui JQuery merupakan salah satu framework AJAX yang diminati dan populer saat ini, yang dilengkapi oleh plugin-plugin yang fantastik. Agar teknik One Click Upload ini bisa berjalan dengan baik aku menggunakan plugin one-click upload.
Plugin tersebut bisa direview pada url http://www.michaelmitchell.co.nz/one-click-upload/ , pada url tersebut diberikan contoh untuk serverside menggunakan PHP, untuk itu aku mencoba menggunakan JSP (Java Server Pages) sebagai serverside yang bertugas untuk merespon request dan melakukan proses upload file ke server.
Demo aplikasi ini bisa dilihat disini
Berikut ini potongan dari penggunaan plugin one-click upload yang aku gunakan pada demo tersebut.
$(document).ready(function() { $('#upload').upload({ name: 'file', method: 'post', enctype: 'multipart/form-data', action: '/FileUpload/doupload.jsp', //Ubah menjadi /FileUpload/Upload jika ingin mencoba servlet onSubmit: function() { $('#loading').show(); $('#result').hide(); $('#upload').hide(); }, onComplete: function(data) { $('#loading').hide(); $('#result').html(data); $('#result').fadeIn('slow'); $('#upload').fadeIn('slow'); } }); })
Sedangkan untuk seversidenya sebagai berikut
<%@page contentType="text/html" pageEncoding="UTF-8" language="java"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ page import="java.util.List" %> <%@ page import="java.util.Iterator" %> <%@ page import="java.io.File" %> <%@ page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%> <%@ page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%> <%@ page import="org.apache.commons.fileupload.*"%> <% String fullFile=""; String realPath=""; long sizerule = 102400; //(dalam byte) bisa diubah sesuai dengan kebutuhan boolean isMultipart = ServletFileUpload.isMultipartContent(request); if(!isMultipart){ out.print("Request bukan multipart !!!<br>"); return; } FileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); List items = null; try{ items = upload.parseRequest(request); }catch(FileUploadException e){} Iterator itr = items.iterator(); while(itr.hasNext()){ FileItem item = (FileItem) itr.next(); if(item.isFormField()) { } else { fullFile = item.getName().trim(); //Memperoleh nama_file.ekstensi long filesize = item.getSize(); //Memperoleh ukuran file //Memperoleh path tujuan upload realPath = config.getServletContext().getRealPath("/") + "uploadedfile\\" + fullFile; if(fullFile.trim().equals("")){ out.println("Inputan Anda masih kosong!!!<br>"); }else if(fullFile.indexOf(".jpg")==-1){ out.println("File Anda harus bertipe *.jpg <br>"); }else if(filesize > sizerule){ out.println("Ukuran file <b>"+fullFile+"</b> tidak boleh lebih dari "+ (sizerule/1024)+" KB !!!<br>"); }else{ try { File savedFile = new File(realPath); item.write(savedFile); out.print("File <b>"+fullFile+"</b> berhasil disimpan <br>"); /* File dihapus (buang saja/jadikan sebagai baris komentar pada * bagian ini jika Anda ingin memperoleh/melihat hasil pada * path tujuan upload) */ new File(realPath).delete(); } catch (Exception ex) { out.println("Gagal menyimpan file!!! <br>"); break; } } } } %>
Sourcecode bisa diunduh disini
Untuk proses upload file aku memanfaatkan library commons-fileupload-1.2.1.jar dan commons-io-1.4.jar yang sudah aku sertakan pada file sourcecode.
Aku juga menyertakan sourcecode untuk servlet pada file yang Anda unduh tersebut jika ingin mencoba penanganan upload file pada serverside oleh servlet.
Selamat mencoba






