如何在一个页面中使用多个SWFUpload对象上传文件

浏览数：43 / 时间：2015年06月09日

首先需要引入相应的样式和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">&nbsp;&nbsp;</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">&nbsp;&nbsp;</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}">