码迷，mamicode.com
首页 > Web开发 > 详细

SWFUpload多文件上传 文件数限制 setStats()

时间：2015-07-08 18:05:36      阅读：139      评论：0      收藏：0      [点我收藏+]

标签：

使用swfupload仿公平图片上传


SWFUpload它是基于flash与javascript的client文件上传组件。

handlers.js文件

完毕文件入列队（fileQueued） →
完毕选择文件（fileDialogComplete） → 開始上传文件（uploadStart） → 上传处理（uploadProgress） → 上传成功（uploadSuccess） → 上传完毕（uploadComplete）  →
列队完毕（queueComplete）

如上所看到的。单选文件顺序运行以上回调函数，须要注意的是选择多个文件，fileQueued、queueComplete仅仅会运行一次，而fileDialogComplet...→ uploadComplete每一个文件都运行一次。



參考官方样例完毕基本功能后，仿赶集採用iframe的方式

为了实现缩略图预览 以及删除 和上传图片个数的限制

显示缩略图，生成删除缩略图的button，

thumbImages为父页面显示缩略图的div 

src_s为生成的缩略图地址

src_b为原图地址

serverData是图片上传处理页面返回的数据 成功则以    success|缩略图地址|原图地址   这种格式返回

[javascript] view plaincopy
  1. function uploadSuccess(file, serverData) {  
  2.     try {  
  3.         var result = serverData.split(‘|‘);  
  4.           
  5.         if(result[0] != ‘success‘) {  
  6.             var progress = new FileProgress(file, this.customSettings.progressTarget);  
  7.             progress.setError();  
  8.             progress.setStatus(serverData);  
  9.             progress.toggleCancel(false);  
  10.         } else {  
  11.             var progress = new FileProgress(file, this.customSettings.progressTarget);  
  12.             progress.setComplete();  
  13.             progress.setStatus("上传完毕");  
  14.             progress.toggleCancel(false);  
  15.             var img_url_s = result[1];  
  16.             var img_url_b = result[2];  
  17.             addImage(img_url_s,img_url_b);  
  18.         }  
  19.   
  20.     } catch (ex) {  
  21.         this.debug(ex);  
  22.     }  
  23. }  


[javascript] view plaincopy
  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.       
  11.     var newA = parent.document.createElement("a");  
  12.     newA.className = "delete";  
  13.     newA.title = "删除";  
  14.     newA.href = "javascript::";  
  15.     newA.onclick = function(){delDiv(newDiv);};  
  16.   
  17.     var newInput_s = parent.document.createElement("input");  
  18.     newInput_s.type = "hidden";  
  19.     newInput_s.value = src_s;  
  20.     newInput_s.name = "image_s[]";  
  21.   
  22.     newA.appendChild(newInput_s);  
  23.   
  24.     var newInput_b = parent.document.createElement("input");  
  25.     newInput_b.type = "hidden";  
  26.     newInput_b.value = src_b;  
  27.     newInput_b.name = "image_b[]";  
  28.   
  29.     newA.appendChild(newInput_b);  
  30.       
  31.     var newImgDiv = parent.document.createElement("div");  
  32.   
  33.     var newImg = parent.document.createElement("img");  
  34.     newImg.style.height = "60px";  
  35.     newImg.style.width = "80px";  
  36.   
  37.     newImgDiv.appendChild(newImg);  
  38.   
  39.     newDiv.appendChild(newImgDiv);  
  40.     newDiv.appendChild(newA);  
  41.     parent.document.getElementById("thumbImages").appendChild(newDiv);  
  42.   
  43.     if (newImg.filters) {  
  44.         try {  
  45.             newImg.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0;  
  46.         } catch (e) {  
  47.             // If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.  
  48.             newImg.style.filter = ‘progid:DXImageTransform.Microsoft.Alpha(opacity=‘ + 0 + ‘)‘;  
  49.         }  
  50.     } else {  
  51.         newImg.style.opacity = 0;  
  52.     }  
  53.   
  54.     newImg.onload = function () {  
  55.         fadeIn(newImg, 0);  
  56.     };  
  57.     newImg.src = src_s;  
  58. }  
  59.   
  60. function fadeIn(element, opacity) {  
  61.     var reduceOpacityBy = 5;  
  62.     var rate = 30;  // 15 fps  
  63.   
  64.   
  65.     if (opacity < 100) {  
  66.         opacity += reduceOpacityBy;  
  67.         if (opacity > 100) {  
  68.             opacity = 100;  
  69.         }  
  70.   
  71.         if (element.filters) {  
  72.             try {  
  73.                 element.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity;  
  74.             } catch (e) {  
  75.                 // If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.  
  76.                 element.style.filter = ‘progid:DXImageTransform.Microsoft.Alpha(opacity=‘ + opacity + ‘)‘;  
  77.             }  
  78.         } else {  
  79.             element.style.opacity = opacity / 100;  
  80.         }  
  81.     }  
  82.   
  83.     if (opacity < 100) {  
  84.         setTimeout(function () {  
  85.             fadeIn(element, opacity);  
  86.         }, rate);  
  87.     }  
  88. }  


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

[javascript] view plaincopy
  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.   
  8. function delDiv(mydiv) {  
  9.     mydiv.parentNode.removeChild(mydiv);  
  10.     //swfu參见iframe页面中的 swfu = new SWFUpload(settings);  
  11.     var stats = swfu.getStats();  
  12.     stats.successful_uploads--;  
  13.     swfu.setStats(stats);  
  14.     var status = document.getElementById("divStatus");  
  15.     status.innerHTML = "已上传 " + stats.successful_uploads + " 个文件,还能够上传"+ parseInt(swfu.settings[‘file_upload_limit‘]-stats.successful_uploads) +"个文件";  
  16. }  

可能是因为使用iframe的关系

delDiv函数里的swfu不能用this取代


总体效果例如以下图：

技术分享



当上传完图片后。再次改动信息时，须要取已经上传了多少个图片，结合到swfupload里

通过php从后台取到已上传的图片路径。通过smarty给到一个js数组里

[javascript] view plaincopy
  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}  

查询swfupload文档得到例如以下资料

flashReady()

该事件函数是内部事件。因此不能被重写。

当SWFupload实例化，载入的FLASH完毕全部初始化操作时触发此事件。

提醒：相应设置中的自己定义事件swfupload_loaded_handler

于是通过swfupload的settings里设置 swfupload_loaded_handler

[javascript] view plaincopy
  1. swfupload_loaded_handler : loaded,  

再在handlers.js定义loaded函数
[javascript] view plaincopy
  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. }  


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


[javascript] view plaincopy
  1. //初始化已经上传过的图片  
  2. function addImageFromDb(src_s,src_b,swfu) {  
  3.       
  4.     var stats = swfu.getStats();  
  5.     stats.successful_uploads++;  
  6.     swfu.setStats(stats);  
  7.     var status = document.getElementById("divStatus");  
  8.     status.innerHTML = "已上传<font color=‘green‘>" + stats.successful_uploads + "</font>张,还能够上传<font color=‘red‘>"+ parseInt(swfu.settings[‘file_upload_limit‘]-stats.successful_uploads) +"</font>张";  
  9.   
  10.     addImage(src_s,src_b);  
  11. }  

參考博客：http://blog.csdn.net/keyunq/article/details/7191590

參考文档：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()

标签：

原文地址：http://www.cnblogs.com/bhlsheji/p/4630782.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！