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 图片上传预览-兼容标准
Jun 01 Javascript
JQuery 风格的HTML文本转义
Jul 01 Javascript
javascript学习笔记(一) 在html中使用javascript
Jun 18 Javascript
表格单元格交错着色实现思路及代码
Apr 01 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 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
第七节 类的静态成员 [7]
2006/10/09 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
Javascript 模式实例 观察者模式
2009/10/24 Javascript
图像替换新技术 状态域方法
2010/01/28 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
简单的辞职信怎么写
2015/02/28 职场文书
会计稽核岗位职责
2015/04/13 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
导游词之潮音寺
2019/09/26 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python