时间:2016-11-15 14:53:37
高级应用
一. 事件
这里,所谓的事件就是因用户或计算机自动操作过程中产生的一些结果。
swfupload中包含很多事件,如用户点击“选择文件”按钮,文件选择框弹出前会触发fileDialogStart事件;用户点击上传按钮,swfupload响应并在上传前会触发uploadStart事件;文件上传过程中会不停的触发uploadProgress事件等等。
官方的解释:
SWFUpload在操作过程中会触发一系列事件,开发者可以利用这些回调的处理事件来控制UI,控制操作或者报告错误。
所有的事件都是在SWFUpload实例的上下文中调用的,因此在这些回调的事件中使用this能够直接访问到该触发该事件的实例对象。
所有事件应该在实例初始化时setting参数中预设完成。[详细事件列表]
二. 侦听事件
在swfupload初始化时,我们就必须侦听我们想侦听的事件,当然如果不侦听也不会出错,swfupload不做任何操作。
比如我们我们有这样的需求
- 用户选择文件后自动上传,打开文件选择窗口后若未选择文件则不操作
- 动态显示上传进度
- 上传完成后提示文件上传是否成功
- 增加“停止上传”按钮,用于在上传过程中停止上传,并将上传的文件回归到上传队列中
- 文件上传过程中禁用“选择文件”按钮,文件上传完成或者中途取消上传恢复“选择文件”按钮
用户选择文件后自动上传需要侦听fileDialogComplete事件。我们要先定义一个函数:
- function fileDialogComplete(selectedNum, queuedNum) {
- if (queuedNum > 0) {//选择并添加到上传队列的文件数大于0
- this.startUpload();//开始上传
- this.setButtonDisabled(true);//禁用上传按钮
- }
- }
- //并在选项参数中加上该参数
- file_dialog_complete_handler: fileDialogComplete
该函数用于侦听文件选择对话框关闭的事件,如果用户选择并且成功加入上传队列的文件数大于0即立即开始上传,另外禁用上传按钮,以防出错。
动态显示上传进度需要侦听uploadProgress事件,另外我们还要在html中插入一个div用于显示上传进度。
- var statusE = document.getElementById(‘swfu-upload-status‘);//文件上传进度节点
- function uploadProgress(file, curBytes, totalBytes) {
- statusE.innerHTML = ['文件名:', file.name, '
- 总尺寸:', totalBytes, 'B
- 已上传:', curBytes, 'B
- 进度:', parseInt((curBytes/totalBytes)*100), '%'].join(”);
- }
- //并且在选项参数中加上该参数
- upload_progress_handler: uploadProgress
uploadProgress事件被触发后执行uploadProgress函数,并且给该函数传递三个参数,分别是当前上传的文件对象,当前以上传大小(单位:字节),当前上传的文件总大小(单位:字节)。
上传完成后提示文件上传是否成功需要至少侦听两个事件uploadError上传出错以及uploadSuccess上传成功,并建议侦听额外的一个uploadComplete事件,无论上传成功或者失败都会被触发。代码如下:
- //上传过程中出错
- function uploadError(file, errCode, msg) {
- statusE.innerHTML += ['
- 文件[', file.name, ']上传出错,出错代码:[', errCode, '],出错原因:‘, msg].join(”);
- }
- //上传成功
- function uploadSuccess(file, data) {
- statusE.innerHTML += ['
- 文件[', file.name, ']上传成功,服务器返回信息:‘, data].join(”);
- }
- //上传完成,无论上传过程中出错还是上传成功,都会触发该事件,并且在那两个事件后被触发
- function uploadComplete(file) {
- statusE.innerHTML += ['
- 文件[', file.name, ']结束上传‘].join(”);
- this.setButtonDisabled(false);//恢复上传按钮
- }
- //并且在选项参数中加上该参数
- upload_error_handler: uploadError,//文件上传出错
- upload_success_handler: uploadSuccess,//文件上传成功
- upload_complete_handler: uploadComplete//文件上传完成,在upload_error_handler或者upload_success_handler之后触发
uploadError函数的三个参数分别为:文件对象,出错代码以及出错明文信息。
uploadSuccess函数的两个参数分别为文件对象,服务器返回的信息。服务器返回的信息,实在是太大了,比如上传一张图片,经过服务器处理后需要返回在服务器上存储的url,然后供显示显示,等等。
uploadComplete函数只有一个参数,即文件对象。
但是,这里在windows上有一个bug,官方如此解释:
在window平台下,那么服务端的处理程序在处理完文件存储以后,必须返回一个非空值,否则uploadError/uploadSuccess事件都不会被触发,随后的uploadComplete事件也无法触发。
另外文件上传过程中禁用“选择文件”按钮,文件上传完成或者中途取消上传恢复“选择文件”按钮这个需求,其实已经完成了,分别在fileDialogComplete事件中开始上传之前禁用按钮,以及uploadComplete事件中恢复按钮。
细心的同学,可能已经发现了,我们这里只是讲解了单个文件的上传,并没有利用到swfupload利器的一大王牌功能——多文件上传,这个会在下一节更多参数中提到。
另外几个没有提到的几个事件也大同小异,这里我建议大件看文档(中文),师傅带进门,修行靠个人嘛,况且swfupload也不是个很复杂的东东。
更多参数
这里只提几个额外经常会用到的,一些边边角角的大家可以选择去看汉化官方文档。
Filedata,类似于表单上传控件的name属性,默认值为Filedata。这里不建议修改,因为在Linux下的flash,无论怎么修改这个值,都没有效果。
post_params, post值。连同上传的文件一起提交到服务器上,这个东东也是比较有用的,比如可以验证用户是否允许上传文件等,另外可以用swfupload的addPostParam/setPostParams/removePostParam/addFileParam/removeFileParam方法修改该值,通常在上传文件额外还需要提交表单信息的时候会特别管用。
requeue_on_error, 是否将上传失败的的文件重新添加到上传队列的顶端,默认值为true。当文件上传失败或者停止上传触发uploadError事件,是否将上传失败的的文件重新添加到上传队列的顶端,当然调用cancelUpload方法触发uploadError事件,不会将文件重新添加到上传队列中,而是会丢弃。
file_types,限制上传的文件类型,这个是非常有用且重要的,默认值为*.*。另外当用户指向上传图片时可以设置为”*.jpg;*.jpeg;*.gif;*.png;*.bmp;”。另外有一点非常重要的就是,这里只是浏览器端限制了上传的文件类型,服务端依然要验证上传的文件类型,否则可能是很危险的。
file_upload_limit,允许同时上传文件的数量,默认值为0,即不限制。当文件队列中的文件数,正在上传的文件以及已经上传成功的文件数只和超过了该值后,便不在允许添加文件。
file_queue_limit,允许队列存在的文件数量,默认值为0,即不限制。当文件队列中的文件数超过该值便不再允许添加文件。
button_action,点击swfupload按钮执行的动作,默认值为SWFUpload.BUTTON_ACTION.SELECT_FILES(多文件上传)。
官方如是说:
button_action (v2.2.0新增) 设置Flash Button点击以后的动作。默认为SWFUpload.BUTTON_ACTION.SELECT_FILES,点击按钮将会打开多文件上传的对话框。如果设置为SWFUpload.BUTTON_ACTION.SELECT_FILE,则为单文件上传。如果设置为SWFUpload.BUTTON_ACTION.START_UPLOAD,则启动文件上传。
button_disabled,按钮是否禁用,默认值为false。
button_cursor,鼠标经过时的鼠标形状,默认值为SWFUpload.CURSOR.ARROW(箭头光标)。另外还有SWFUpload.CURSOR.HAND(手型),这里我非常建议设置为体验更好的SWFUpload.CURSOR.HAND,因为我觉得尽头光标很硬,不和善。
custom_settings,一些自定义的信息,默认值为一个空对象{}。这个没什么好说的,主要作用为存储一些和swfupload有关的信息,而且防止与其它变量或者函数重名。
- custom_settings: {‘name‘:‘zhangshan‘,‘age‘:15}
- alert(swfu.customSettings['name']);
- alert(swfu.customSettings.age);
插件
插件不想多说,以Cookies插件为例讲一个。
这个插件主要目的为解决IE下的一个bug,flash不能将浏览器的cookie提交到服务器。
以至于服务端不能验证用户的登陆态,而在以插件形式允许的flash在FF或者chrome下就没有该问题。该插件的原理为使用js获取浏览器cookie,存放到请求的post数据中一起提交给服务器。这里需要注意的一点是,用户提交的post数据如果和cookie中某个数据重名会将覆盖掉cookie的值。
用法:
在head中载入插件的js,就可以了
- <script src="plugins/swfupload.cookies.js"></script>
我们可以通过debug框看到cookie数据已经存入到post_params中了。
是不是soeasy吧,还是那句话,师傅带进门,修行靠个人,swfupload带给我们体验和可定制度都是非常高的,继续享受把。
官方网站:http://www.swfupload.org/(英文)
官方例子:http://demo.swfupload.org/(英文)
SWFUpload v2.2.0.1 手册: http://demo.swfupload.org/Documentation/(英文)
SWFUpload下载地址http://code.google.com/p/swfupload/downloads/list