如何在一个页面中使用多个SWFUpload对象上传文件
首先需要引入相应的样式和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}">