码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-12-23 19:23:27      阅读:367      评论:0      收藏:0      [点我收藏+]

标签:

 

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

 

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

标签:

原文地址:http://www.cnblogs.com/avivaye/p/4180662.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!