使用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|缩略图地址|原图地址   这样的格式返回

  1. function uploadSuccess(file, serverData) {
  2. try {
  3. var result = serverData.split('|');
  4. if(result[0] != 'success') {
  5. var progress = new FileProgress(file, this.customSettings.progressTarget);
  6. progress.setError();
  7. progress.setStatus(serverData);
  8. progress.toggleCancel(false);
  9. } else {
  10. var progress = new FileProgress(file, this.customSettings.progressTarget);
  11. progress.setComplete();
  12. progress.setStatus("上传完成");
  13. progress.toggleCancel(false);
  14. var img_url_s = result[1];
  15. var img_url_b = result[2];
  16. addImage(img_url_s,img_url_b);
  17. }
  18. } catch (ex) {
  19. this.debug(ex);
  20. }
  21. }
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);
}
}
  1. function addImage(src_s,src_b) {
  2. var newDiv = parent.document.createElement("div");
  3. newDiv.style.margin = "5px";
  4. newDiv.style.height = "60px";
  5. newDiv.style.width = "80px";
  6. newDiv.style.border = "1px solid #7F9DB9";
  7. newDiv.style.cssFloat = "left";
  8. newDiv.style.styleFloat = "left";
  9. newDiv.style.position = "relative";
  10. var newA = parent.document.createElement("a");
  11. newA.className = "delete";
  12. newA.title = "删除";
  13. newA.href = "javascript::";
  14. newA.onclick = function(){delDiv(newDiv);};
  15. var newInput_s = parent.document.createElement("input");
  16. newInput_s.type = "hidden";
  17. newInput_s.value = src_s;
  18. newInput_s.name = "image_s[]";
  19. newA.appendChild(newInput_s);
  20. var newInput_b = parent.document.createElement("input");
  21. newInput_b.type = "hidden";
  22. newInput_b.value = src_b;
  23. newInput_b.name = "image_b[]";
  24. newA.appendChild(newInput_b);
  25. var newImgDiv = parent.document.createElement("div");
  26. var newImg = parent.document.createElement("img");
  27. newImg.style.height = "60px";
  28. newImg.style.width = "80px";
  29. newImgDiv.appendChild(newImg);
  30. newDiv.appendChild(newImgDiv);
  31. newDiv.appendChild(newA);
  32. parent.document.getElementById("thumbImages").appendChild(newDiv);
  33. if (newImg.filters) {
  34. try {
  35. newImg.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0;
  36. } catch (e) {
  37. // If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
  38. newImg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')';
  39. }
  40. } else {
  41. newImg.style.opacity = 0;
  42. }
  43. newImg.onload = function () {
  44. fadeIn(newImg, 0);
  45. };
  46. newImg.src = src_s;
  47. }
  48. function fadeIn(element, opacity) {
  49. var reduceOpacityBy = 5;
  50. var rate = 30;  // 15 fps
  51. if (opacity < 100) {
  52. opacity += reduceOpacityBy;
  53. if (opacity > 100) {
  54. opacity = 100;
  55. }
  56. if (element.filters) {
  57. try {
  58. element.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity;
  59. } catch (e) {
  60. // If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
  61. element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')';
  62. }
  63. } else {
  64. element.style.opacity = opacity / 100;
  65. }
  66. }
  67. if (opacity < 100) {
  68. setTimeout(function () {
  69. fadeIn(element, opacity);
  70. }, rate);
  71. }
  72. }
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);
}
}

关于剩余可上传文件个数的处理

  1. function queueComplete(numFilesUploaded) {
  2. this.setButtonDisabled(false);
  3. var stats = this.getStats();
  4. var status = document.getElementById("divStatus");
  5. status.innerHTML = "已上传 " + stats.successful_uploads + " 个文件,还可以上传"+ parseInt(this.settings['file_upload_limit']-stats.successful_uploads) +"个文件";
  6. }
  7. function delDiv(mydiv) {
  8. mydiv.parentNode.removeChild(mydiv);
  9. //swfu参见iframe页面中的 swfu = new SWFUpload(settings);
  10. var stats = swfu.getStats();
  11. stats.successful_uploads--;
  12. swfu.setStats(stats);
  13. var status = document.getElementById("divStatus");
  14. status.innerHTML = "已上传 " + stats.successful_uploads + " 个文件,还可以上传"+ parseInt(swfu.settings['file_upload_limit']-stats.successful_uploads) +"个文件";
  15. }
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数组里

  1. var img_arr = new Array();
  2. {if isset($img_arr)}
  3. {section name='img_arr' loop=$img_arr}
  4. img_arr[{$smarty.section.img_arr.index}] = new Array('{$img_arr[img_arr].images_s}','{$img_arr[img_arr].images_b}');
  5. {/section}
  6. {/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

  1. swfupload_loaded_handler : loaded,
swfupload_loaded_handler : loaded,

再在handlers.js定义loaded函数

  1. function loaded() {
  2. if(img_arr.length != 0) {
  3. for( val in img_arr ) {
  4. addImageFromDb(img_arr[val][0],img_arr[val][1],this);
  5. }
  6. }
  7. }
function loaded() {
if(img_arr.length != 0) {
for( val in img_arr ) {
addImageFromDb(img_arr[val][0],img_arr[val][1],this);
}
}
}

调用addImageFromDb函数 修改已上传的图片数量 并且生成已上传的图片的缩略图

  1. //初始化已经上传过的图片
  2. function addImageFromDb(src_s,src_b,swfu) {
  3. var stats = swfu.getStats();
  4. stats.successful_uploads++;
  5. swfu.setStats(stats);
  6. var status = document.getElementById("divStatus");
  7. status.innerHTML = "已上传<font color='green'>" + stats.successful_uploads + "</font>张,还可以上传<font color='red'>"+ parseInt(swfu.settings['file_upload_limit']-stats.successful_uploads) +"</font>张";
  8. addImage(src_s,src_b);
  9. }
//初始化已经上传过的图片
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()的更多相关文章

  1. plupload如何限制上传文件数量,限制只能上传单个文件

    1 完整代码 $(function() { $("#uploader").pluploadQueue({ runtimes : 'html5,gears,flash,silverl ...

  2. swfupload上传文件问题

    如果你的框架用到了struts2的话  可能会造成request冲突    那么解决的办法就是把该request排除出去  不让struts2拦截

  3. SWFUpload 已上传成功数量控制 插件(用于解决队列满问题)

    当我们在使用 SWFUpload 做文件上传时,我们需要把已经上传的文件列表做一个删除, 但在我们把已上传列表删除后,再重新上传时,会发现提示 上传队列满 的问题,原因就是有一个状态对象中的一个 成功 ...

  4. JS 上传文件 Uploadify 网址及 v3.2.1 参数说明

    http://www.uploadify.com/ 一.属性 属性名称 默认值 说明 auto true 设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 . buttonC ...

  5. js实现上传文件夹

    上传大文件的解决方案 需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端 ...

  6. jquery上传文件控件Uploadify

    基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个 ...

  7. input上传文件个数控制

    HTML: <h3>请上传[2,5]个文件</h3> <form action="" enctype="multipart/form-dat ...

  8. MVC3+jquery Uploadify 上传文件

    最近做项目用到了上传图片的功能,以前也写过这类代码,不过都是用传统的file标签,今天整理一个好用的插件Uploadify..都做了一些注释,一看便知. 可以去官网下载最新的:Uploadify下载地 ...

  9. SWFUpload上传大文件(暂时用用,真正用的时候还是要改的)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. phpcms V9二级目录下分页路径不正确问题的彻底解决方法

    在用phpcms V9做二次开发的时候,我们有时候会把一个栏目生成到根目录下,而且这个栏目又有子栏目,我们生成静态的时候分页会出现问题,就是分页的路径的地址错误.有一种解决方法就是,把这个栏目生成动态 ...

  2. c++使用http协议上传文件到七牛云服务器

    使用c++ http协议上传文件到七牛服务器时,比较搞的一点就是header的设置: "Content-Type:multipart/form-data;boundary=xxx" ...

  3. CMCC有限的访问权限如何解决

    最近两天一直出现这个问题,连接CMCC-EDU的时候就是连接不上,提示有限的访问权限,什么诊断和修复IP自动获取都不管用,就是连接不上.怎么说本人也是一个电脑迷,越到这样不靠谱的问题确实不知道如何解决 ...

  4. 《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 = ...

  5. spring Bean配置的三种形式

    Spring Bean配置有以下三种形式: 传统的xml配置 Spring 2.5 以后新增注解配置 Spring3.0以后新增JavaConfig 1. 传统的xml配置 <?xml vers ...

  6. ubantu 虚拟机无法查看windows共享目录

    初学linux,安装好虚拟机,安装好ubantu系统,启动系统后无法查看windows共享目录. 原因是没有安装 vmware tools 教程地址:http://www.linuxidc.com/L ...

  7. XMemcached使用经历

    XMemcached就是Memcached的java客户端之一,目前项目里用到了.据说它比起其他的java客户端从性能上要好一点,实现方式是NIO的.先看怎么实例化出来一个Memcached客户端吧: ...

  8. android中状态栏透明

    设置 Acitivity 所在 window 的属性 @Override protected void onCreate(Bundle savedInstanceState) { super.onCr ...

  9. CAN总线远程帧和错误帧

    远程帧 通常,数据传输是由数据源节点(例如,传感器发出数据帧)自主完成的.但也可能存在目标节点向源节点请求发送数据的情况.要做到这一点,目标节点需发送一个远程帧,其中的标识符应与所需数据帧的标识符相匹 ...

  10. 蓝桥杯 算法训练 ALGO-21 装箱问题

     算法训练 装箱问题   时间限制:1.0s   内存限制:256.0MB 问题描述 有一个箱子容量为V(正整数,0<=V<=20000),同时有n个物品(0<n<=30),每 ...