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

首页 > 代码库 > 如何在一个页面中使用多个SWFUpload对象上传文件

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

2024-08-09 14:00:18 219人阅读

首先需要引入相应的样式和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="http://www.mamicode.com/${name}">

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

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 如何在一个页面中使用多个SWFUpload对象上传文件

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

看完仍有疑问？有类似问题直接问程序猿