网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 SWFUpload多文件上传及文件个数限制的方法
内容
    本文实例讲述了SWFUpload多文件上传及文件个数限制的方法。分享给大家供大家参考，具体如下：
    SWFUpload是一个基于flash与JavaScript的客户端文件上传组件。
    handlers.js文件
    完成文件入列队（fileQueued） →
    完成选择文件（fileDialogComplete） → 开始上传文件（uploadStart） → 上传处理（uploadProgress） → 上传成功（uploadSuccess） → 上传完成（uploadComplete）  →
    列队完成（queueComplete）
    如上所示，单选文件顺序执行以上回调函数，需要注意的是选择多个文件，fileQueued、queueComplete只会执行一次，而fileDialogComplet...→ uploadComplete每个文件都执行一次。
    参考官方例子完成基本功能后，仿赶集采用iframe的方式
    为了实现缩略图预览 以及删除 和上传图片个数的限制
    显示缩略图，生成删除缩略图的按钮，
    thumbImages为父页面显示缩略图的div
    src_s为生成的缩略图地址
    src_b为原图地址
    serverData是图片上传处理页面返回的数据 成功则以    success|缩略图地址|原图地址   这样的格式返回
    function uploadSuccess(file, serverData) {
      try {
        var result = serverData.split('|');
        if(result[0] != 'success') {
          var progress = new FileProgress(file, this.customSettings.progressTarget);
          progress.setError();
          progress.setStatus(serverData);
          progress.toggleCancel(false);
        } else {
          var progress = new FileProgress(file, this.customSettings.progressTarget);
          progress.setComplete();
          progress.setStatus("上传完成");
          progress.toggleCancel(false);
          var img_url_s = result[1];
          var img_url_b = result[2];
          addImage(img_url_s,img_url_b);
        }
      } catch (ex) {
        this.debug(ex);
      }
    }
    function addImage(src_s,src_b) {
      var newDiv = parent.document.createElement("div");
      newDiv.style.margin = "5px";
      newDiv.style.height = "60px";
      newDiv.style.width = "80px";
      newDiv.style.border = "1px solid #7F9DB9";
      newDiv.style.cssFloat = "left";
      newDiv.style.styleFloat = "left";
      newDiv.style.position = "relative";
      var newA = parent.document.createElement("a");
      newA.className = "delete";
      newA.title = "删除";
      newA.href = "javascript::";
      newA.onclick = function(){delDiv(newDiv);};
      var newInput_s = parent.document.createElement("input");
      newInput_s.type = "hidden";
      newInput_s.value = src_s;
      newInput_s.name = "image_s[]";
      newA.appendChild(newInput_s);
      var newInput_b = parent.document.createElement("input");
      newInput_b.type = "hidden";
      newInput_b.value = src_b;
      newInput_b.name = "image_b[]";
      newA.appendChild(newInput_b);
      var newImgDiv = parent.document.createElement("div");
      var newImg = parent.document.createElement("img");
      newImg.style.height = "60px";
      newImg.style.width = "80px";
      newImgDiv.appendChild(newImg);
      newDiv.appendChild(newImgDiv);
      newDiv.appendChild(newA);
      parent.document.getElementById("thumbImages").appendChild(newDiv);
      if (newImg.filters) {
        try {
          newImg.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0;
        } catch (e) {
          // If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
          newImg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')';
        }
      } else {
        newImg.style.opacity = 0;
      }
      newImg.onload = function () {
        fadeIn(newImg, 0);
      };
      newImg.src = src_s;
    }
    function fadeIn(element, opacity) {
      var reduceOpacityBy = 5;
      var rate = 30; // 15 fps
      if (opacity < 100) {
        opacity += reduceOpacityBy;
        if (opacity > 100) {
          opacity = 100;
        }
        if (element.filters) {
          try {
            element.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity;
          } catch (e) {
            // If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
            element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')';
          }
        } else {
          element.style.opacity = opacity / 100;
        }
      }
      if (opacity < 100) {
        setTimeout(function () {
          fadeIn(element, opacity);
        }, rate);
      }
    }
    关于剩余可上传文件个数的处理
    function queueComplete(numFilesUploaded) {
      this.setButtonDisabled(false);
      var stats = this.getStats();
      var status = document.getElementById("divStatus");
      status.innerHTML = "已上传 " + stats.successful_uploads + " 个文件,还可以上传"+ parseInt(this.settings['file_upload_limit']-stats.successful_uploads) +"个文件";
    }
    function delDiv(mydiv) {
      mydiv.parentNode.removeChild(mydiv);
      //swfu参见iframe页面中的 swfu = new SWFUpload(settings);
      var stats = swfu.getStats();
      stats.successful_uploads--;
      swfu.setStats(stats);
      var status = document.getElementById("divStatus");
      status.innerHTML = "已上传 " + stats.successful_uploads + " 个文件,还可以上传"+ parseInt(swfu.settings['file_upload_limit']-stats.successful_uploads) +"个文件";
    }
    可能是由于使用iframe的关系
    delDiv函数里的swfu不能用this代替
    整体效果如下图：
    名单
    当上传完图片后，再次修改信息时，需要取已经上传了多少个图片，结合到swfupload里
    通过php从后台取到已上传的图片路径，通过smarty给到一个js数组里
    var img_arr = new Array();
    {if isset($img_arr)}
    {section name='img_arr' loop=$img_arr}
    img_arr[{$smarty.section.img_arr.index}] = new Array('{$img_arr[img_arr].images_s}','{$img_arr[img_arr].images_b}');
    {/section}
    {/if}
    查询swfupload文档得到如下资料
    flashReady()
    该事件函数是内部事件，因此不能被重写。当SWFupload实例化，加载的FLASH完成所有初始化操作时触发此事件。
    提醒：对应设置中的自定义事件swfupload_loaded_handler
    于是通过swfupload的settings里设置 swfupload_loaded_handler
    swfupload_loaded_handler : loaded,
    再在handlers.js定义loaded函数
    function loaded() {
      if(img_arr.length != 0) {
        for( val in img_arr ) {
          addImageFromDb(img_arr[val][0],img_arr[val][1],this);
        }
      }
    }
    调用addImageFromDb函数 修改已上传的图片数量 并且生成已上传的图片的缩略图
    //初始化已经上传过的图片
    function addImageFromDb(src_s,src_b,swfu) {
      var stats = swfu.getStats();
      stats.successful_uploads++;
      swfu.setStats(stats);
      var status = document.getElementById("divStatus");
      status.innerHTML = "已上传<font color='green'>" + stats.successful_uploads + "</font>张,还可以上传<font color='red'>"+ parseInt(swfu.settings['file_upload_limit']-stats.successful_uploads) +"</font>张";
      addImage(src_s,src_b);
    }
    希望本文所述对大家JavaScript程序设计有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/20 7:16:20