引言:最近項目中需要用到多檔案上傳,在網上找了很多資料,最開始使用的是uploadify這個插件,在使用的過程中各種問題,什麼Flash版本的問題,浏覽器相容性的問題總之是一大堆,最後在衆多問題下,無奈隻好放棄了。最後選擇了SWFUpload,在網上下載下傳了個DEMO,servlet的,感覺挺好用的,基本的功能也都能實作,但是不知道怎麼整合到我自己的項目中就不行了,我本想将調用背景的方法改成我自己的action裡面對應的方法,上傳的時候總是提示IOError的錯誤,根本進不到我的方法裡面去,後來在網上找了下資料,說是struts2在對路徑進行攔截的時候沒法獲得SWFUpload給的路徑,貌似解決辦法還需修改Struts2源碼,一下我就奔潰了,礙于項目時間的限制,被迫再次放棄。對于我自己來說一個東西搞了這麼久到最後卻還沒有做出來,心裡實在是堵得慌,但手上又有别的任務,隻好暫時放下了。是以我今天将這個DEMO放到這上面來,等有時間了,我一定去解決這個問題,同時也希望大家能給出寶貴的意見。
簡單介紹下SWFUpload:
SWFUpload是一個用戶端檔案上傳工具,最初由Vinterwebb.se開發,它通過整合Flash與JavaScript技術為WEB開發者提供了一個具有豐富功能繼而超越傳統<input type="file" />标簽的檔案上傳模式。是以要使用這個插件,就必須安裝Flash。
先來看看這個DEMO的結構圖:
從圖中可以看出,代碼很簡單,就是調用了swfupload這個插件,
在來看看index.jsp裡面的内容:
<%@ page language="java" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort() + path + "/";
StringBuffer uploadUrl = new StringBuffer("http://");
uploadUrl.append(request.getHeader("Host"));
uploadUrl.append(request.getContextPath());
uploadUrl.append("/FileUploadServlet.htm1");
System.out.println("uploadUrl====>"+uploadUrl);
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>" target="_blank" rel="external nofollow" >
<title>SWFUpload Demos</title>
<link href="css/default.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/button.css" target="_blank" rel="external nofollow" type="text/css" />
<script type="text/javascript" src="js/swfupload/swfupload.js"></script>
<script type="text/javascript" src="js/swfupload/swfupload.queue.js"></script>
<script type="text/javascript" src="js/swfupload/handlers.js"></script>
<script type="text/javascript">
var swfu;
window.onload = function () {
swfu = new SWFUpload({
upload_url: "<%=uploadUrl.toString()%>",
post_params: {"name" : "zwm"},
use_query_string:true,//這塊必須設定,要不然在背景處理的時候是沒法獲得name的值的
// File Upload Settings
file_size_limit : "10 MB", // 檔案大小控制
file_types : "*.*",
file_types_description : "All Files",
file_upload_limit : "0",
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,//選擇好檔案後送出
file_queued_handler : fileQueued,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
button_placeholder_id : "spanButtonPlaceholder",
button_width: 180,
button_height: 18,
button_text : '<span class="button">請選擇檔案 </span>',
button_text_style : '.button { font-family: Helvetica, Arial, sans-serif; font-size: 12pt; } .buttonSmall { font-size: 10pt; }',
button_text_top_padding: 0,
button_text_left_padding: 18,
button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
button_cursor: SWFUpload.CURSOR.HAND,
// Flash Settings
flash_url : "js/swfupload/swfupload.swf",
custom_settings : {
upload_target : "divFileProgressContainer"
},
// Debug Settings
debug: false //是否顯示調試視窗
});
};
function startUploadFile(){
swfu.startUpload();
}
</script>
</head>
<body style="background-color: #C0D1E3; padding: 2px;">
<div id="content">
<form>
<div
style="display: inline; border: solid 1px #7FAAFF; background-color: #C5D9FF; padding: 2px;">
<span id="spanButtonPlaceholder"></span>
<input id="btnUpload" type="button" value="上 傳"
οnclick="startUploadFile();" class="btn3_mouseout"
/>
<input id="btnCancel" type="button" value="取消所有上傳"
οnclick="cancelUpload();" disabled="disabled" class="btn3_mouseout"
/>
</div>
</form>
<div id="divFileProgressContainer"></div>
<div id="thumbnails">
<table id="infoTable" width="530" style="display: inline; border: solid 1px #7FAAFF; background-color: #C5D9FF; padding: 2px;margin-top:8px;">
</table>
</div>
</div>
</body>
</html>
效果圖如下:
由于篇幅的關系,背景代碼就不展示了,最後我會提供下載下傳位址。
最後讓大家看看上傳的效果圖:
背景輸出結果:
uploadUrl====>http://localhost:8088/SwfUpload/FileUploadServlet.htm1
name====>zwm
個人感覺這個插件還是很好用的,效果也很好,如果各位能幫忙解決我引言中的問題話,還望給小弟留個言,感激不盡!!!
DEMO下載下傳位址:http://download.csdn.net/detail/javaweiming/6859185