Flash上傳組件之SWFUpload文件上傳

時間 2019-12-01

原文原文鏈接

1、什麼是SWFUpload？javascript

SWFUpload是一個客戶端文件上傳工具，最初由Vinterwebb.se開發，它經過整合Flash與JavaScript技術爲WEB開發者提供了一個具備豐富功能繼而超越傳統<input type="file" />標籤的文件上傳模式。css

目前此項目放在：https://code.google.com/p/swfupload/html

對應的中文API：http://leeon.me/upload/other/swfupload.htmljava

因爲SWFUpload是falsh和JavaScript結合開發的，這可能在HTML5流行的今天可能不太適合。並且SWFUpload和官網早就不更新了。推薦使用另外一個插件Plupload，這個插件會自動檢測當前瀏覽器適合的上傳方式：HTML五、Flash、Silverlight。jquery

SWFUpload的主要特色：web

* 能夠同時上傳多個文件；apache

* 相似AJAX的無刷新上傳；數組

* 能夠顯示上傳進度；瀏覽器

* 良好的瀏覽器兼容性；安全

* 兼容其餘JavaScript庫 (例如：jQuery, Prototype等)；

* 支持Flash 8和Flash 9；

SWFUpload不一樣於其餘基於Flash構建的上傳工具，它有着優雅的代碼設計，開發者能夠利用XHTML、CSS和JavaScript來爲所欲爲的定製它在瀏覽器下的外觀；它還提供了一組簡明的JavaScript事件，藉助它們開發者能夠方便的在文件上傳過程當中更新頁面內容來營造各類動態效果。

2、通常的開發流程

一、引入對應的JS和CSS文件。

二、實例化SWFUpload對象，進行對象的初始化的配置。

三、瀏覽網頁，打開並選取要上傳的文件。

四、後臺接收前臺傳送的文件流，進行處理。

五、後臺返回對應的參數並進行前臺提示。

這是我作的一個例子效果以下：

例一：

例二：

例一的代碼：

index.jsp

<%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>swfUpload上傳文件（Java和Jquery）</title>
    <script type="text/javascript" src="jquery/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="swfupload/swfupload.js"></script>
    <link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="swfPlaceHold">
</div>
<ol id="fileList">
</ol>
<input type="button" value="上傳" id="submit">
</body>
<script type="text/javascript" src="swfupload/swfuploadHandlers.js"></script>
</html>

swfuploadHandlers.js

/**
 * Created by zhang on 14-2-25.
 */
var queueErrorArray;
var setting = {
    upload_url: "/upload",       //後臺處理的程序路徑
    flash_url: "swfupload/swfupload.swf", //swf程序路徑
    file_types: "*.jpg;*.png;*.gif;*.mp4;*.wmv",     //容許上傳文件種類
    file_types_description: "Web Image", //對上傳文件的描述
    file_size_limit: "200MB",         //文件上傳的大小單位默認爲KB
    file_upload_limit: 0,

    //debug
    debug: false,

    //handlers
    file_dialog_start_handler: fileDialogStar,   //打開選擇對話框觸發的事件
    file_queued_handler: fileQueued,             //把文件加入上傳隊列觸發的事件
    file_queue_error_handler: fileError,       //文件加入隊列錯誤時觸發的事件
    file_dialog_complete_handler: fileDialogComplete, //文件選擇完成觸發的事件
    upload_start_handler: uploadStar,               //文件上傳觸發的事件
    upload_progress_handler: uploadprogress,        //上傳中觸發的事件
    upload_complete_handler: uploadComplete,        //上傳完成觸發的事件
    upload_success_handler: uploadSuccess,         //上傳成功時觸發的事件

    //button
    button_placeholder_id: "swfPlaceHold",
    button_text: "請選擇上傳文件",
    button_width: 270,
    button_height: 20,
    button_cursor: SWFUpload.CURSOR.HAND,
    button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT
};

var swfup = new SWFUpload(setting);

/*********************************************handler************************************/

/**
 * 打開文件對話框時的觸發的事件
 */
function fileDialogStar() {
    if (queueErrorArray) {
        queueErrorArray = null;
    }
}

/**
 * 文件加入上傳隊列時觸發的事件
 * @param 選擇上傳的文件對象
 */
function fileQueued(file) {
    var swfup = this;        //當前的swfupload實例對象
    var listItem = "<li id='" + file.id + "'>";
    listItem += "文件：<em>" + file.name + "</em>(" + Math.round(file.size / 1024) + "KB)<span id='progressValue'></span>";
    listItem += "<div id='progressBar'><div id='progress'></div></div>";
    listItem += "<p id='statue'></p><span id='cancle'></span></li>";
    $("#fileList").append(listItem);

    //按鈕的取消事件
    $("li#" + file.id + " #cancle").click(function (e) {
        swfup.cancelUpload(file.id);
        $("li#" + file.id).remove();
    });
}

/**
 * 文件加入隊列錯誤觸發的事件
 * @param file上傳的文件對象
 * @param errorCode返回的錯誤代碼
 * @param msg 錯誤信息
 */
function fileError(file, errorCode, msg) {
    //錯誤隊列數組
    if (!queueErrorArray) {
        queueErrorArray = [];
    }
    errorFile = {
        file: file,
        code: errorCode,
        error: ''
    };

    switch (errorCode) {
        case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
            errorFile.error = '文件大小超出限制';
            break;
        case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
            errorFile.error = '文件類型不容許';
            break;
        case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
            errorFile.error = '超出文件數量限制.';
            break;
        case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
            errorFile.error = '你選擇的文件是空的';
            break;

        case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
            errorFile.error = '服務器出錯';
            break;
        case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:
            errorFile.error = '程序沒有設置upload_url屬性';
            break;
        case SWFUpload.UPLOAD_ERROR.IO_ERROR:
            errorFile.error = '讀取或傳輸文件時發生錯誤';
            break;
        case SWFUpload.UPLOAD_ERROR.ZERO_BYTE_FILE:
            errorFile.error = '文件爲空文件';
            break;
        case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
            errorFile.error = '上傳受到了安全方面的限制';
            break;
        case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
            errorFile.error = '上傳出現錯誤';
            break;
        default :
            errorFile.error = '上傳文件出錯，錯誤代碼：' + errorCode;
            break;

    }
    queueErrorArray.push(errorFile);
}

/**
 * 選擇文件對話框關閉時觸發,報告所選文件個數、加入上傳隊列文件數及上傳隊列文件總數
 * @param numSelected 選擇的文件數目
 * @param numQueued 加入隊列的文件數目
 * @param numTotalInQueued 上傳文件隊列中文件總數
 */
function fileDialogComplete(numSelected, numQueued, numTotalInQueued) {
    if (queueErrorArray && queueErrorArray.length) {    //若是有錯誤文件

        var table = $('<table><tr><td>文件</td><td>大小</td></tr></table>');
        for (var i in queueErrorArray) {
            var tr = $('<tr></tr>');
            var info = '<td>' + queueErrorArray[i].file.name + '<span style="color:red">(' + queueErrorArray[i].error + ')</span></td>'
                + '<td>' + queueErrorArray[i].file.size + 'bytes</td>';
            table.append(tr.append(info));
        }
        $('body').append(table);
    } else {
        this.startUpload();             //開始上傳
    }

}

/**
 * 文件上傳觸發的事件
 * @param file一個文件對象
 */
function uploadStar(file) {
    if (file) {
        $('#fileList li#' + file.id).find('p#statue').text("上傳中。。。。。");
        $('#fileList li#' + file.id).find('p#progress').width("0%");
    }
}

/**
 *文件上傳過程Flash定時調用的方法用來返回當前上傳的進度
 * @param file 上傳文件對象
 * @param byteCompleted 上傳的字節
 * @param byteTotal 總的字節
 */
function uploadprogress(file, byteCompleted, byteTotal) {
    var percentByte = Math.round((byteCompleted / byteTotal) * 100);    //當前進度
    $('#fileList li#' + file.id).find('span#progressValue').text(percentByte + "%");
    $('#fileList li#' + file.id).find('div#progress').css('width', percentByte + '%');

}


/**
 * 文件上傳完畢而且服務器返回200狀態碼時觸發
 * @param file 上傳的文件
 * @param serverData
 * @param response
 */
function uploadSuccess(file, serverData, response) {
    var $item = $("#fileList li#" + file.id);
    $item.find('div#progress').css('width', '100%');
    $item.find('span#progressValue').css('color', 'blue').text('100%');
    $item.find('p#statue').html('上傳完成!').css('color', 'green');
}

/**
 * 在一個上傳週期結束後觸發(uploadError及uploadSuccess均觸發)
 * 在此能夠開始下一個文件上傳(經過上傳組件的uploadStart()方法)
 * @param file 上傳完成的文件對象
 */
function uploadComplete(file) {
    //判斷隊列中還有沒有文件

    if (this.getStats().files_queued > 0) {
        this.startUpload();
    } else {
        this.cancelUpload(this.fileProgressID);
        $("#fileList li").remove();
    }
}

/********************************按鈕事件綁定*********************************************/
$('#submit').click(function () {
    swfup.startUpload();
});

後臺對應處理的Servlet

package com.zxd.tool;

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;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import java.io.*;
import java.util.List;
import java.util.UUID;

/**
 * Created by zhang on 14-2-25.
 */
@WebServlet("/upload")
public class Upload extends HttpServlet {
    private File tempDir;   //臨時路徑
    private File saveDir;   //保存路徑

    /**
     * servlet初始化事件
     *
     * @param config
     * @throws ServletException
     */
    public void init(ServletConfig config) throws ServletException {
        String uploadPath = config.getServletContext().getRealPath("/");
        StringBuffer sb = new StringBuffer(uploadPath);
        saveDir = new File(sb.append("\\upload").toString());
        tempDir = new File(sb.append("\\temp").toString());
        if (!saveDir.exists()) {
            saveDir.mkdir();
        }
        if (!tempDir.exists()) {
            tempDir.mkdir();
        }

    }

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
        this.doPost(request, response);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {

        DiskFileItemFactory factory = new DiskFileItemFactory();
        factory.setSizeThreshold(1 * 1024 * 1024);      //設置緩衝區大小
        factory.setRepository(tempDir);             //設置臨時保存目錄
        ServletFileUpload sfu = new ServletFileUpload(factory); //Servelt文件上傳對象
        sfu.setFileSizeMax(200 * 1024 * 1024);  //200M
        sfu.setHeaderEncoding("utf-8");
        List<FileItem> list = null;
        try {
            list = sfu.parseRequest(request);       //獲得文件
        } catch (FileUploadException e) {
            e.printStackTrace();
        }
        int size = list.size();
        for (int i = 0; i < size; i++) {//循環保存文件
            FileItem file = list.get(i);
            if (file.isFormField()) {   //若是是表單字段
                String name = file.getFieldName();  // 得到該字段名稱
                String value = file.getString("utf-8"); //得到該字段值
            } else {
                String extName = file.getName().substring(      //獲得擴展名
                        file.getName().lastIndexOf("."));
                String fname = UUID.randomUUID()+extName;
                try {
                    file.write(new File(saveDir, fname));  // 寫入文件
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }


    }