首先需要引入相應的樣式和JS文件，還需要借助jQuery的js
提供下載路徑：http://pan.baidu.com/s/1EUzca
① 引入js
<script type="text/javascript" src="${pageContext.request.contextPath }/js/swfupload/swfupload/swfupload.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/js/swfupload/js/swfupload.queue.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/js/swfupload/js/fileprogress.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/js/swfupload/js/handlers.js"></script>
② 初始化SWFUpload對象（紅色的需要注意）
$(document).ready(function() {
//初始化第一個SWFUpload對象 var upload1 = new SWFUpload({ //提交路徑 upload_url: "${pageContext.request.contextPath }/upload3.action", //向后台傳遞額外的參數 post_params: {"name" : "identifier_img_"}, //上傳文件的名稱 file_post_name: "file", // 下面自己按照字面意思理解 file_size_limit : "51200", // 100MB file_types : "*.jpg;*.gif;*.png", file_types_description : "*.jpg;*.gif;*.png", file_upload_limit : "10",//最多上傳幾次 file_queue_limit : "1",//每次最多上傳幾個 // 事件處理 file_dialog_start_handler : fileDialogStart,//在文件選取窗口將要彈出時觸發 file_queued_handler : fileQueued, file_queue_error_handler : fileQueueError,//處理上傳的驗證邏輯 file_dialog_complete_handler : fileDialogComplete, upload_start_handler : uploadStart, upload_progress_handler : uploadProgress, upload_error_handler : uploadError, upload_success_handler : uploadSuccess,//上傳完成后的回調函數 upload_complete_handler : uploadComplete, // 按鈕的處理 button_image_url : "${pageContext.request.contextPath }/js/swfupload/swfupload/uploadbutt.jpg", button_placeholder_id : "spanButtonPlaceholder1", button_width: 100, button_height: 28, //button_text:'<span class="theFont">選擇添加</span>', // Flash Settings flash_url : "${pageContext.request.contextPath }/js/swfupload/swfupload/swfupload.swf", custom_settings : { progressTarget : "fsUploadProgress1", cancelButtonId : "btnCancel1" }, // Debug Settings debug: false });
//初始化第二個SWFUpload對象 var upload2 = new SWFUpload({ //提交路徑 upload_url: "${pageContext.request.contextPath }/upload3.action", //向后台傳遞額外的參數 post_params: {"name" : "identifier_img_"},//為圖片重命名的前綴 //上傳文件的名稱 file_post_name: "file",//傳給后台的name="file" // 下面自己按照字面意思理解 file_size_limit : "51200", // 100MB file_types : "*.jpg;*.gif;*.png", file_types_description : "*.jpg;*.gif;*.png", file_upload_limit : "10",//最多上傳10次 file_queue_limit : "1",//每次最多上傳一個 // 事件處理 file_dialog_start_handler : fileDialogStart,//在文件選取窗口將要彈出時觸發 file_queued_handler : fileQueued, file_queue_error_handler : fileQueueError, file_dialog_complete_handler : fileDialogComplete, upload_start_handler : uploadStart, upload_progress_handler : uploadProgress, upload_error_handler : uploadError, upload_success_handler : uploadSuccess, upload_complete_handler : uploadComplete, // 按鈕的處理 button_image_url : "${pageContext.request.contextPath }/js/swfupload/swfupload/uploadbutt.jpg", button_placeholder_id : "spanButtonPlaceholder2", button_width: 100, button_height: 28, //button_text:'<span class="theFont">選擇添加</span>', // Flash Settings flash_url : "${pageContext.request.contextPath }/js/swfupload/swfupload/swfupload.swf", custom_settings : { progressTarget : "fsUploadProgress2", cancelButtonId : "btnCancel2" }, // Debug Settings debug: false });
});
③ 定義需要的處理函數
function uploadSuccess(file, server) { var progress = new FileProgress(file, this.customSettings.progressTarget); progress.setComplete(); progress.setStatus("上傳成功"+server); progress.toggleCancel(false); //后台傳遞回來的內容 var symbol="identifier_img_"; var object = document.getElementsByName('name'); var url=symbol+object[object.length-1].value;（后台返回的文件名稱。如：identifier_img_123232453655634.jpg） var type = $("#upload_type").val(); if(type == '1'){ $("#sfzPath").val("/upload/up3/"+url); $("#sfzImg").attr("src","${pageContext.request.contextPath }/upload/up3/"+url); $(".img1").show(); $(".img2").hide(); }else if(type == '2'){ $("#yyzzPath").val("/upload/up3/"+url); $("#yyzzImg").attr("src","${pageContext.request.contextPath }/upload/up3/"+url); $(".img2").show(); $(".img1").hide(); } } function fileQueueError(file, errorCode, errorMsg) { var msgText = "上傳失敗\n"; switch (errorCode) { case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED: msgText += "每次最多選擇上傳 " + this.settings.file_queue_limit + "個文件,
並且最多只能選擇"+this.settings.file_upload_limit+"次"; break; case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT: msgText += "文件大小超過限制( " + this.settings.file_size_limit + "KB )"; break; case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE: msgText += "文件大小為0"; break; case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE: msgText += "文件格式不正確，僅限 " + this.settings.fileTypeExts; break; default: msgText += "錯誤代碼：" + errorCode + "\n" + errorMsg; } alert(msgText); }
④ 定義HTML（紅色部分與JS關聯）
<!--第一個按鈕-->
<li> <input id="btnCancel1" type="hidden" value="" onclick="cancelQueue(upload1);" disabled="disabled" /> <span class="tit_zhxg" style="width:200px;">證件上傳SWF1：</span> <span id="spanButtonPlaceholder1"></span> </li> <li> <div style="display: none" class="fieldset flash" id="fsUploadProgress1"> <span class="legend">文件上傳</span> </div> </li> <li class="img1" style="display:none;"> <span class="tit_zhxg">圖片上傳預覽：</span> </li> <li class="img1" style="display:none;margin-top: -10px; height: 85px;margin-bottom:98px;"> <span class="tit_zhxg"> </span> <img src="" style="width: 340px; height:180px;" id="sfzImg"> <input type="hidden" name="IMGPATH" value="" id="sfzPath"> </li>
<!--第二個按鈕-->
<li> <input id="btnCancel2" type="hidden" value="" onclick="cancelQueue(upload2);" disabled="disabled" /> <span class="tit_zhxg" style="width:200px;">證件上傳SWF2：</span> <span id="spanButtonPlaceholder2"></span> </li> <li> <div style="display: none" class="fieldset flash" id="fsUploadProgress2"> <span class="legend">文件上傳</span> </div> </li> <li class="img1" style="display:none;"> <span class="tit_zhxg">圖片上傳預覽：</span> </li> <li class="img1" style="display:none;margin-top: -10px; height: 85px;margin-bottom:98px;"> <span class="tit_zhxg"> </span> <img src="" style="width: 340px; height:180px;" id="yyzzImg"> <input type="hidden" name="IMGPATH" value="" id="yyzzPath"> </li>
⑤ 編寫后台處理程序
private File file;//傳來的文件FILE
private String fileFileName;//文件名
private String fileContentType;//文件類型
private String savePath;//保存路徑
private String name;//額外的參數
HttpServletRequest request = ServletActionContext.getRequest();
//getters and setters
public String up3() throws Exception {
InputStream is = new FileInputStream(file); String root = getSavePath(); String tempName = System.currentTimeMillis()+this.getFileFileName().substring(this.getFileFileName().indexOf(".")); String saveName=this.getName()+this.getFileFileName().substring(this.getFileFileName().indexOf(".")); File deskFile = new File(root,this.getName()+tempName);//+"_"+this.getFileFileName()); this.setName(tempName);
OutputStream os = new FileOutputStream(deskFile); byte[] bytefer = new byte[1024]; int length = 0; while ((length = is.read(bytefer)) != -1) { os.write(bytefer, 0, length); } os.close(); is.close(); return "success"; }
⑥ 編寫配置文件
<action name="upload3" class="com.action.FileUploadAction" method="up3"> <param name="savePath">/upload/up3</param>
<result name="success">js/swfupload/fh.jsp</result>
</action>
fh.jsp
<input name="name" value="${name}">