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


Posted in Javascript onMay 31, 2016

本文实例讲述了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多文件上传及文件个数限制的方法

当上传完图片后,再次修改信息时,需要取已经上传了多少个图片,结合到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系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
JavaScript页面倒计时功能完整示例
May 15 Javascript
Vue路由模块化配置的完整步骤
Aug 14 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 #Javascript
javascript事件模型介绍
May 31 #Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 #Javascript
javascript事件处理模型实例说明
May 31 #Javascript
jQuery基础知识点总结(必看)
May 31 #Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 #Javascript
javascript小数精度丢失的完美解决方法
May 31 #Javascript
You might like
深入了解php4(2)--重访过去
2006/10/09 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
用pickle存储Python的原生对象方法
2017/04/28 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
读书心得体会
2013/12/28 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
特教教师先进事迹
2014/05/21 职场文书
县级文明单位申报材料
2014/05/23 职场文书
工作总结与自我评价
2014/09/18 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
党员公开承诺书2015
2015/01/21 职场文书
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL