一、什么是SWFUpload？
SWFUpload是一個客戶端文件上傳工具，最初由Vinterwebb.se開發，它通過整合Flash與JavaScript技術為WEB開發者提供了一個具有豐富功能繼而超越傳統<input type="file" />標簽的文件上傳模式。
目前此項目放在：https://code.google.com/p/swfupload/
對應的中文API：http://leeon.me/upload/other/swfupload.html
由於SWFUpload是falsh和JavaScript結合開發的，這可能在HTML5流行的今天可能不太適合。而且SWFUpload和官網早就不更新了。推薦使用另一個插件Plupload，這個插件會自動檢測當前瀏覽器適合的上傳方式：HTML5、Flash、Silverlight。
SWFUpload的主要特點：
* 可以同時上傳多個文件；
* 類似AJAX的無刷新上傳；
* 可以顯示上傳進度；
* 良好的瀏覽器兼容性；
* 兼容其他JavaScript庫 (例如：jQuery, Prototype等)；
* 支持Flash 8和Flash 9；
SWFUpload不同於其他基於Flash構建的上傳工具，它有着優雅的代碼設計，開發者可以利用XHTML、CSS和JavaScript來隨心所欲的定制它在瀏覽器下的外觀；它還提供了一組簡明的JavaScript事件，借助它們開發者可以方便的在文件上傳過程中更新頁面內容來營造各種動態效果。
二、一般的開發流程
1、引入對應的JS和CSS文件。
2、實例化SWFUpload對象，進行對象的初始化的配置。
3、瀏覽網頁，打開並選取要上傳的文件。
4、后台接收前台傳送的文件流，進行處理。
5、后台返回對應的參數並進行前台提示。
這是我做的一個例子效果如下：
例一：
例二：
例一的代碼：
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();
}
}
}
}