Fasilitas upload file tentu sudah sering kita jumpai di berbagai situs. Kali ini saya ingin memberikan contoh bagaimana membuat form untuk upload file menggunakan JSP. JSP sendiri tidak menyediakan fasilitas untuk mengupload file (mengirim file dari client ke server). Walaupun begitu, kita tetap bisa membuat code sendiri untuk mengimplementasikan fungsi upload file dengan menggunakan Java. Namun cara seperti ini sangat kompleks.

Untungnya kita bermain di dunia Java, yang penuh dengan berbagai framework dan library yang bersifat open source.😀 Ada beberapa library yang menyediakan fungsi upload file itu sendiri. Sekarang saya akan memberikan contoh menggunakan library com.oreilly.servlet. Librarynya bisa kalian download disini.

Sekarang buatlah sebuah new Java Web project menggunakan netbeans kalian. Kemudian masukkan cos-05Nov2002.jar yang baru didownload tadi ke dalam WEB-INF/lib/. Lalu edit file index.jsp menjadi seperti ini

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
         <form action="doUpload.do" method="post" enctype="MULTIPART/FORM-DATA">
            <input type="FILE" name="fileUpload"> <br>
            <input type="submit" value="upload">
        </form>
    </body>
</html>

 

Kemudian buat sebuah class UploadAction berikut

package com.maniakjava.action;

import com.oreilly.servlet.MultipartRequest;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class UploadAction extends HttpServlet
{
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
	            throws ServletException, IOException
    {
        response.setContentType("text/html; charset=UTF-8");
        PrintWriter out = response.getWriter();
        try
        {
            MultipartRequest mr = new MultipartRequest(request,"D:", 10000000);

            Enumeration en = mr.getFileNames();
            String kd = (String) en.nextElement();

            String nmFile = mr.getFilesystemName(kd);
            File file = mr.getFile(kd);

            out.print("File " + nmFile + " telah sukses diupload");
            out.print("<br>Jenis file yang diupload : " + mr.getContentType(kd));
            out.print("<br>Ukuran file yang diupload : " + file.length());
            out.print("<br>File terletak di D:");
        }
        catch(Throwable e)
        {
            out.println("error : " + e.getMessage());
        }
    }
}

 

Parameter kedua dalam pembuatan object MultipartRequest adalah lokasi dimana file upload akan disimpan, parameter ketiga adalah ukuran maksimum file yang dapat diupload. Sekarang tambahkan konfigurasi servlet berikut pada web.xml

<servlet>
    <servlet-name>uploadServlet</servlet-name>
        <servlet-class>com.maniakjava.action.UploadAction</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>uploadServlet</servlet-name>
        <url-pattern>/doUpload.do</url-pattern>
    </servlet-mapping>

Sekarang kalian tinggal menjalankan project tersebut. Lalu cobalah upload sebuah file dan liat di D:\ apakah file tersebut berhasil diupload atau tidak.😀 Lalu bagaimana jika kita ingin melakukan upload lebih dari satu file sekaligus ? Saya akan berikan contohnya di artikel terpisah.

Comments
  1. san says:

    om kalau di satuin sama inputan text bisa ga?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s