uploadify的java應用

API：http://www.uploadify.com/documentation/

下載地址：http://www.uploadify.com/

這幾天查看插件，發現uploadify插件做不錯，查了一些資料，總結筆記一下。

項目文件截圖：

lib如圖；

web.xml代碼：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>UploadifyJava</display-name>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
    <description></description>
    <display-name>UpFileServlet</display-name>
    <servlet-name>UpFileServlet</servlet-name>
    <servlet-class>com.horizon.action.UpFileServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>UpFileServlet</servlet-name>
    <url-pattern>/UpFileServlet</url-pattern>
  </servlet-mapping>
</web-app>

UpFileServlet.java代碼：

package com.horizon.action;

import java.io.File;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;
import java.util.UUID;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

/**
 * Servlet implementation class UpFileServlet
 */
public class UpFileServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public UpFileServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    @SuppressWarnings({ "unchecked", "rawtypes" })
    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        // 獲得參數
        String timestamp = request.getParameter("timestamp");
        String token = request.getParameter("token");
        System.out.println(timestamp);
        System.out.println(token);
        // 獲得文件
        String savePath = this.getServletConfig().getServletContext()
                .getRealPath("");
        savePath = savePath + "/uploads/";
        File f1 = new File(savePath);
        
        System.out.println(savePath);
        
        if (!f1.exists()) {
            f1.mkdirs();
        }
        DiskFileItemFactory fac = new DiskFileItemFactory();
        ServletFileUpload upload = new ServletFileUpload(fac);
        upload.setHeaderEncoding("utf-8");
        List fileList = null;
        try {
            fileList = upload.parseRequest(request);
        } catch (FileUploadException ex) {
            System.out.println(ex.getMessage());
            return;
        }
        
        Iterator<FileItem> it = fileList.iterator();
        String name = "";
        String extName = "";
        while (it.hasNext()) {
            FileItem item = it.next();
            if (!item.isFormField()) {
                name = item.getName();
                long size = item.getSize();
                String type = item.getContentType();
                System.out.println(size + " " + type);
                if (name == null || name.trim().equals("")) {
                    continue;
                }

                // 擴展名格式：
                if (name.lastIndexOf(".") >= 0) {
                    extName = name.substring(name.lastIndexOf("."));
                }

                File file = null;
                do {
                    // 生成文件名：
                    name = UUID.randomUUID().toString();
                    file = new File(savePath + name + extName);
                } while (file.exists());
                File saveFile = new File(savePath + name + extName);
                try {
                    item.write(saveFile);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
        response.getWriter().print(name + extName);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doPost(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

index.jsp代碼：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>UploadiFive Test</title>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/uploadify/jquery.uploadify.min.js"
    type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="js/uploadify/uploadify.css">
<style type="text/css">
body {
    font: 13px Arial, Helvetica, Sans-serif;
}
</style>
</head>
<body>
    <h1>Uploadify Demo for java</h1>
    <form>
        <div id="queue"></div>
        <input id="file_upload" name="file_upload" type="file" multiple="true" />
        <a href="javascript:$('#file_upload').uploadify('upload')">開始上傳</a>&nbsp;
        <a href="javascript:$('#file_upload').uploadify('cancel')">取消所有上傳</a>
        </p>
    </form>
    <script type="text/javascript">
        $(function() {
            var timestamp = new Date().getTime();
            $('#file_upload').uploadify({
                'formData' : {
                    'timestamp' : timestamp,
                    'token' : 'unique_salt' + timestamp
                },// 設置想后台傳遞的參數 如果設置該參數，那么method應該設置為get，才能得到參數
                'swf' : 'js/uploadify/uploadify.swf',// 指定swf文件
                'uploader' : 'UpFileServlet',// 后台處理的頁面
                'cancelImg' : 'js/uploadify/uploadify-cancel.png',// 取消按鈕圖片路徑
                "queueID" : 'queue',// 上傳文件頁面中，你想要用來作為文件隊列的元素的id, 默認為false  自動生成,  不帶#
                'method' : 'get',// 設置上傳格式
                'auto' : false,// 當選中文件后是否自動提交
                'multi' : true,// 是否支持多個文件上傳
                'simUploadLimit' : 2,
                'buttonText' : '選擇文件',// 按鈕顯示的文字
                'onUploadSuccess': function (file, data, response) {// 上傳成功后執行
                    $('#' + file.id).find('.data').html(' 上傳完畢');
                 }
            });
        });
    </script>
</body>
</html>

期間在上傳參數時，發現無法傳送，經過查CSDN的資料，可以設置method參數為get，來解決問題。

針對，上傳是complete轉為中文，jquery.uploadify.js源碼下圖：

得出結論。

參考網址：http://www.cnblogs.com/babycool/archive/2012/08/04/2623137.html

另外還有html5版本，需要的話可以查看官網