加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

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

发布时间：2020-12-15 07:02:43 所属栏目：百科 来源：网络整理
导读：使用swfupload仿赶集的图片上传 SWFUpload是一个基于flash与javascript的客户端文件上传组件。 handlers.js文件 完成文件入列队（fileQueued） → 完成选择文件（fileDialogComplete） → 开始上传文件（uploadStart） → 上传处理（uploadProgress） → 上

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

[javascript] view plain copy
  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 plain copy
  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 plain copy
  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 plain copy
  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 plain copy
  1. swfupload_loaded_handler?:?loaded,??

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同