SWFUpload實現多檔案上傳DEMO
阿新 • • 發佈：2019-01-03
引言：最近專案中需要用到多檔案上傳，在網上找了很多資料，最開始使用的是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%>"> <title>SWFUpload Demos</title> <link href="css/default.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="css/button.css" 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="上 傳" onclick="startUploadFile();" class="btn3_mouseout" /> <input id="btnCancel" type="button" value="取消所有上傳" onclick="cancelUpload();" disabled="disabled" class="btn3_mouseout" /> </div> </form> <div id="divFileProgressContainer"></div> <div id="thumbnails"> <table id="infoTable" border="0" 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