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 相关文章推荐
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
Jan 02 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
express中static中间件的具体使用方法
Oct 17 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 Javascript
Vue基础配置讲解
Nov 29 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
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
PHP操作数组相关函数
2011/02/03 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
javascript的函数作用域
2014/11/12 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
python更改已存在excel文件的方法
2018/05/03 Python
python实现视频分帧效果
2019/05/31 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
企业党员公开承诺书
2014/03/26 职场文书
自我推荐信范文
2014/05/09 职场文书
旷工检讨书1000字
2015/01/01 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
MySQL系列之三 基础篇
2021/07/02 MySQL
5个实用的JavaScript新特性
2022/06/16 Javascript