SWFUpload多文件上传及文件个数限制的方法

站长资源 2024/11/16 佚名

38 1538 38

相思资源网 Design By www.200059.com

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

SWFUpload,多文件上传,文件个数,限制

标签：

SWFUpload,多文件上传,文件个数,限制

相思资源网 Design By www.200059.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

相思资源网 Design By www.200059.com

评论“SWFUpload多文件上传及文件个数限制的方法”

暂无SWFUpload多文件上传及文件个数限制的方法的评论...

www.200059.com 相思资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

SWFUpload多文件上传及文件个数限制的方法

SWFUpload,多文件上传,文件个数,限制

javascript实现任务栏消息提示的简单实例

js弹出框、对话框、提示框、弹窗实现方法总结(推荐)

评论“SWFUpload多文件上传及文件个数限制的方法”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

友情链接

SWFUpload多文件上传及文件个数限制的方法

SWFUpload,多文件上传,文件个数,限制

javascript实现任务栏消息提示的简单实例

js弹出框、对话框、提示框、弹窗实现方法总结(推荐)

评论“SWFUpload多文件上传及文件个数限制的方法”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存