custom_settings : {progressTarget : "fsUploadProgress",cancelButtonId : "btnCancel",uploadButtonId : "btnUpload",myFileListTarget : "idFileList"
},

custom_settings调用方法 this.customSettings.cancelButtonId

缩略图js 
//this.startResizedUpload(this.getFile(0).ID, this.customSettings.thumbnail_width, this.customSettings.thumbnail_height, SWFUpload.RESIZE_ENCODING.JPEG, this.customSettings.thumbnail_quality, false); 替换this.startUpload();

完成文件入列队(fileQueued) →
完成选择文件(fileDialogComplete) → 开始上传文件(uploadStart) → 上传处理(uploadProgress) → 上传成功(uploadSuccess) → 上传完成(uploadComplete)  →列队完成(queueComplete)
如上所示,单选文件顺序执行以上回调函数,需要注意的是选择多个文件,fileQueued、queueComplete只会执行一次,而fileDialogComplet...→ uploadComplete每个文件都执行一次。

use_query_string  该属性可选值为true和false,设置post_params是否以GET方式发送。如果为false,那么则以POST形式发送。

post_params 定义的是一个包含值对的object类型数据,每个文件上传的时候,其中的值对都会被一同发送到服务端。

prevent_swf_caching 默认值:true
(v2.2.0新增)该布尔值设置是否在Flash URL后添加一个随机值,用来防止浏览器缓存了该SWF影片。这是为了解决一些基于IE-engine的浏览器上的出现一个BUG。
button_action默认值:SWFUpload.BUTTON_ACTION.SELECT_FILES(多文件上传)
(v2.2.0新增) 设置Flash Button点击以后的动作。默认为SWFUpload.BUTTON_ACTION.SELECT_FILES,点击按钮将会打开多文件上传的对话框。 如果设置为SWFUpload.BUTTON_ACTION.SELECT_FILE,则为单文件上传。如果设置为 SWFUpload.BUTTON_ACTION.START_UPLOAD,则启动文件上传。

file_post_name : "Filedata" ,默认值: Filedata

该参数设置了POST信息中上传文件的name值(类似传统Form中设置了<input type="file" name="uploadImg"/>的name属性)。

<input id="btnCancel" type="button" value="取消全部" οnclick="swfu.cancelQueue();"/>

<input id="btnCancel" type="button" value="上传相片" οnclick="swfu.startUpload();"/>

File Object
File Object包含了一组可用的文件属性,很多处理事件都会传递一个File Object参数来访问该文件的相关属性。
{
id : string, // SWFUpload控制的文件的id,通过指定该id可启动此文件的上传、退出上传等
index : number, // 文件在选定文件队列(包括出错、退出、排队的文件)中的索引,getFile可使用此索引
name : string, // 文件名,不包括文件的路径。
size : number, // 文件字节数
type : string, // 客户端操作系统设置的文件类型
creationdate : Date, // 文件的创建时间
modificationdate : Date, // 文件的最后修改时间
filestatus : number // 文件的当前状态,对应的状态代码可查看SWFUpload.FILE_STATUS
}

Stats Object
该对象提供了上传队列的状态信息,访问实例的getStats方法可获取此对象。
该对象包括下面属性:
{
in_progress : number // 值为1或0,1表示当前有文件正在上传,0表示当前没有文件正在上传
files_queued : number // 当前上传队列中存在的文件数量
successful_uploads : number // 已经上传成功(uploadSuccess触发)的文件数量
upload_errors : number // 已经上传失败的文件数量 (不包括退出上传的文件)
upload_cancelled : number // 退出上传的文件数量
queue_errors : number // 入队失败(fileQueueError触发)的文件数量
}
所有这些属性的值都可以使用setStats方法来修改,除了in_progress 和 files_queued。

成功上传个数
this.getStats().successful_uploads
等待上传个数
swfUploadInstance.getStats().files_queued;

swfupload_loaded_handler
该事件函数是内部事件,因此不能被重写。当SWFupload实例化,加载的FLASH完成所有初始化操作时触发此事件。
file_dialog_complete_handler : fileDialogComplete
如果你希望在用户选择完文件后自动开始上传操作,那么可以将 this.startUpload() 操作放在这里 。如果想选择 后单独上传就不要加入 file_dialog_complete_handler : fileDialogComplete,或加入里面不能有this.startUpload()

function fileDialogComplete(numFilesSelected, numFilesQueued) {try {if (numFilesSelected > 0) {document.getElementById(this.customSettings.cancelButtonId).disabled = false;}/* I want auto start the upload and I can do that here */if(this.settings.auto_upload){//是否要上传this.startUpload();}} catch (ex)  {this.debug(ex);}
}

支持一键批量上传

function uploadComplete(file) {try {/*  I want the next upload to continue automatically so I'll call startUpload here */if (this.getStats().files_queued > 0) {//this.startResizedUpload(this.getFile(0).ID, this.customSettings.thumbnail_width, this.customSettings.thumbnail_height, SWFUpload.RESIZE_ENCODING.JPEG, this.customSettings.thumbnail_quality, false);this.startUpload();} else {var progress = new FileProgress(file,  this.customSettings.upload_target);progress.setComplete();progress.setStatus("All images received.");progress.toggleCancel(false);}} catch (ex) {this.debug(ex);}
}

系统默认的js是swfupload.js,其他的都是自己开发修改的添加捕获事件函数如handlers.js。 file上传前的图片信息,serverData接收服务端字符串并转为数组类型,可以返回处理后的图片信息。后台处理程序必须 返回输出 字符串(json_encode转换或拼接等)

function uploadSuccess(file, serverData) {var isSuccess = (serverData.indexOf("successed")==0?true:false);try {if(isSuccess){//上传成功回调var tr = document.getElementById(file.id);tr.style.color="green";var bar = document.getElementById(file.id+"_bar");bar.parentNode.innerHTML="上传成功";var delObject = document.getElementById(file.id+"_del");delObject.parentNode.innerHTML="&nbsp;";document.getElementById(this.customSettings.myFileListTarget+"Count").innerHTML=this.getStats().files_queued;//addImage("index.php?r=site/Thumb&id=" + serverData.substring(7));    //缩略图的显示     }else{var tr = document.getElementById(file.id);tr.style.color="red";var bar = document.getElementById(file.id+"_bar");bar.parentNode.innerHTML="上传失败:"+serverData;var delObject = document.getElementById(file.id+"_del");delObject.parentNode.innerHTML="&nbsp;";}} catch (ex) {this.debug(ex);}
}

功能完全支持ie和firefox浏览器!同样也支持safari浏览器!
一般的WEB方式文件上传只能一个一个的进行上传,在某些应用上就显得很不人性化,客户们都希望能够1次选择很多文件,然后让系统把选择的文件全部上传。

有些朋友看到这里,就知道了,其实就是swfupload方法,具体信息可以访问swfupload官方网站:http://www.swfupload.org/
让我们先来看看客户端的界面效果图。(多选文件,批量上传,上传进度显示)

要做到图中的效果,其实很方便,看完下面的描述,相信大家都可以实现上图中的效果了。
说明:swfupload2中通过一个png图片与flash插件进行关联,可以修改images下的png图片来(如上图中的[选择文件]图片)自定义显示自己想要的图片样子(不要修改图片名字和格式)。

本文转载于:http://hudeyong926.iteye.com/blog/904373

转载于:https://www.cnblogs.com/ningvsban/archive/2012/12/24/2831480.html

struts+swfupload实现批量图片上传(上):swfupload相关推荐

  1. 文件上传利器SWFUpload使用指南

    2019独角兽企业重金招聘Python工程师标准>>> 文件上传利器SWFUpload使用指南 SWFUpload是一个flash和js相结合而成的文件上传插件,其功能非常强大.以前 ...

  2. swfupload 实例 php,文件上传之SWFUpload插件(代码)

    下面通过一段代码给大家演示下,主要分为1.前台文件index.html和 2.后台文件upload.php.具体代码如下所示: 1.前台文件index.html SWFUpload var swfu; ...

  3. 文件上传利器SWFUpload使用指南(转)

    http://www.cnblogs.com/2050/archive/2012/08/29/2662932.html 文件上传利器SWFUpload使用指南 SWFUpload是一个flash和js ...

  4. 文件上传利器SWFUpload使用

    原文链接:http://www.cnblogs.com/2050/archive/2012/08/29/2662932.html SWFUpload是一个flash和js相结合而成的文件上传插件,其功 ...

  5. Java使用SpringBoot实现简单的文件上传(上传文件到本地)

    实现代码: (此处代码写在了Controller层 建议写在Service层,Controller只做调用) /*使用SpringBoot实现简单文件上传(上传至本地)*/@RequestMappin ...

  6. 文件上传利器SWFUpload入门简易教程

    凡做过网站开发的都应该知道表单file的确鸡肋. Ajax解决了不刷新页面提交表单,但是却没有解决文件上传不刷新页面,当然也有其它技术让不刷新页面而提交文件,该技术主要是利用隐藏的iFrame, 较A ...

  7. java点击上传上传mysql并显示图片_java + mysql + jdbc实现图片上传

    首先在数据库中用mediumblob来保存图片的位置 Mysql中可以存储大文件数据,一般使用的BLOB对象.如图片,视频等等. BLOB是一个二进制大对象,可以容纳可变数量的数据.因为是二进制对象, ...

  8. Flash上传组件 SWFUpload

    SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供 了一个具有丰富功能继而超越传统<input t ...

  9. python selenium 文件上传_Python Selenium通过Windows上传上传文件

    我读了很多关于和大家的建议,不要使用Windows上传,直接写我文件的路径:我甚至尝试使用论坛上的一些命令,比如:swicthTo() switch_to_window() window_handle ...

最新文章

  1. Spring MVC 相关资料整理
  2. NIOS2随笔——DMA(1)
  3. 审批政策中收入与负债核实
  4. 【CyberSecurityLearning 20】xu ni zhuan yong wang luo
  5. java io 流选择题_java Io流面试题和选择题
  6. U盘安装centos 7 提示 “Warning: /dev/root does not exist, could not boot” 解决办法
  7. php pdo 显示二进制,php – 在MySQL PDO中显示警告
  8. 从《网管员必读》系列丛书获奖看读者的真正需求——成功原因分析(一)
  9. 设计了一个JavaScript的源代码混淆器
  10. iOS安全攻防(十三):数据擦除
  11. XAMPP中mysql升级到5.7.36版本
  12. java答题库_JAVA题库
  13. html右下角图片广告,HTML580用纯JS实现右下角广告代码
  14. 5-1MongoDB 实验——数据备份和恢复--edu上面的nosql题目
  15. 《封神演义》中的阐截二教之争 zz
  16. python_大智慧SAR指标编写
  17. MIPS汇编指令翻译机器码
  18. 【JVM · 字节码】指令集 解析说明
  19. 核磁共振 Nuclear Magnetic Resonance (NMR), H1-NMR, C13-NMR, DEPT, COSY 等分析技术
  20. 霍尼韦尔启动在武汉的新兴市场中国总部;红牛商标所有者​天丝集团扩建在华生产基地 | 美通企业日报...

热门文章

  1. 脚本实现oracle服务启停,通用服务启停shell脚本
  2. 如何用python抢课_名额不够,技术来凑,利用Python实现教务系统强制性抢课
  3. 计算机网络安全管理协议,河西学院校园网络安全管理协议
  4. python在材料模拟中的应用_材料模拟python_模拟-python模拟-在不妨碍实现的情况下修补方法...
  5. wallpaper怎么设置锁屏_Apple ID密码忘了怎么找回?丨如何让面容和指纹解锁立马失效?...
  6. c++矩阵连乘的动态规划算法并输出_「Javascript算法设计」× 动态规划与回溯算法...
  7. 码云上传代码添加标签_第一次使用Git Bash Here 将本地代码上传到码云
  8. linux 连接wifi不稳定,rtl8188ce 无线网不稳定终极解决方案 - 哆啦比猫的技术瞎扯 - Arch Linux · ドラえもん · 实时绘制...
  9. 什么是单模单纤/双纤光纤收发器?
  10. 传输设备,光端机的应用及故障分析