swfupload上传文件数量限制之setStats()
使用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 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 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) +"个文件";
- }
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}
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,
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);
- }
- }
- }
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);
- }
//初始化已经上传过的图片
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);
}
参考文档:http://leeon.me/upload/other/swfupload.html
http://hi.baidu.com/e_polo/blog/item/232745182e3dbbb84aedbcf7.html
http://addcn.blogbus.com/logs/157496180.html
swfupload上传文件数量限制之setStats()的更多相关文章
- plupload如何限制上传文件数量,限制只能上传单个文件
1 完整代码 $(function() { $("#uploader").pluploadQueue({ runtimes : 'html5,gears,flash,silverl ...
- swfupload上传文件问题
如果你的框架用到了struts2的话 可能会造成request冲突 那么解决的办法就是把该request排除出去 不让struts2拦截
- SWFUpload 已上传成功数量控制 插件(用于解决队列满问题)
当我们在使用 SWFUpload 做文件上传时,我们需要把已经上传的文件列表做一个删除, 但在我们把已上传列表删除后,再重新上传时,会发现提示 上传队列满 的问题,原因就是有一个状态对象中的一个 成功 ...
- JS 上传文件 Uploadify 网址及 v3.2.1 参数说明
http://www.uploadify.com/ 一.属性 属性名称 默认值 说明 auto true 设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 . buttonC ...
- js实现上传文件夹
上传大文件的解决方案 需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端 ...
- jquery上传文件控件Uploadify
基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个 ...
- input上传文件个数控制
HTML: <h3>请上传[2,5]个文件</h3> <form action="" enctype="multipart/form-dat ...
- MVC3+jquery Uploadify 上传文件
最近做项目用到了上传图片的功能,以前也写过这类代码,不过都是用传统的file标签,今天整理一个好用的插件Uploadify..都做了一些注释,一看便知. 可以去官网下载最新的:Uploadify下载地 ...
- SWFUpload上传大文件(暂时用用,真正用的时候还是要改的)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- phpcms V9二级目录下分页路径不正确问题的彻底解决方法
在用phpcms V9做二次开发的时候,我们有时候会把一个栏目生成到根目录下,而且这个栏目又有子栏目,我们生成静态的时候分页会出现问题,就是分页的路径的地址错误.有一种解决方法就是,把这个栏目生成动态 ...
- c++使用http协议上传文件到七牛云服务器
使用c++ http协议上传文件到七牛服务器时,比较搞的一点就是header的设置: "Content-Type:multipart/form-data;boundary=xxx" ...
- CMCC有限的访问权限如何解决
最近两天一直出现这个问题,连接CMCC-EDU的时候就是连接不上,提示有限的访问权限,什么诊断和修复IP自动获取都不管用,就是连接不上.怎么说本人也是一个电脑迷,越到这样不靠谱的问题确实不知道如何解决 ...
- 《DSP using MATLAB》示例Example7.22
代码: h = [1, 2, 3, 4, 3, 2, 1]/15; M = length(h); n = 0:M-1; [Hr, w, a, L] = Hr_Type1(h); a L amax = ...
- spring Bean配置的三种形式
Spring Bean配置有以下三种形式: 传统的xml配置 Spring 2.5 以后新增注解配置 Spring3.0以后新增JavaConfig 1. 传统的xml配置 <?xml vers ...
- ubantu 虚拟机无法查看windows共享目录
初学linux,安装好虚拟机,安装好ubantu系统,启动系统后无法查看windows共享目录. 原因是没有安装 vmware tools 教程地址:http://www.linuxidc.com/L ...
- XMemcached使用经历
XMemcached就是Memcached的java客户端之一,目前项目里用到了.据说它比起其他的java客户端从性能上要好一点,实现方式是NIO的.先看怎么实例化出来一个Memcached客户端吧: ...
- android中状态栏透明
设置 Acitivity 所在 window 的属性 @Override protected void onCreate(Bundle savedInstanceState) { super.onCr ...
- CAN总线远程帧和错误帧
远程帧 通常,数据传输是由数据源节点(例如,传感器发出数据帧)自主完成的.但也可能存在目标节点向源节点请求发送数据的情况.要做到这一点,目标节点需发送一个远程帧,其中的标识符应与所需数据帧的标识符相匹 ...
- 蓝桥杯 算法训练 ALGO-21 装箱问题
算法训练 装箱问题 时间限制:1.0s 内存限制:256.0MB 问题描述 有一个箱子容量为V(正整数,0<=V<=20000),同时有n个物品(0<n<=30),每 ...