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

凡做过网站开发的都应该知道表单file的确鸡肋。

Ajax解决了不刷新页面提交表单,但是却没有解决文件上传不刷新页面,当然也有其它技术让不刷新页面而提交文件,该技术主要是利用隐藏的iFrame,较Ajax要麻烦许多,而且其提交方式依然在底层是使用的表单file,这里我们不详谈。而且如果是提交较小的文件,我们能接受,如果提交的文件较大,我们便要忍受很长的等待时间,而浏览器却没有任何提示,我们也没有办法知道文件上传的进度

但是现在,网上出现了一个名为SWFUpload的上传组件,该组件利用Flash自身的文件提交技术而无需刷新页面,而且能够获取文件上传进度,可以提交多个文件,而且还能控制上传文件的大小,类型等信息。这么一个强大而易用的东西,你还在寻找么?

下面就是是SWFUupload的简易教程,服务端大同小异,我这里以php为例。(该教程基于SWFUpload2.2.0.1,虽然SWFUpload v2.5.0 Beta 3已经放出,但是考虑到是测试版,肯定用不稳定的因素,我决定将稳定的2.2.0.1作为本次学习的版本)。

下载SWFUpload

下载地址:swfupload.googlecode.com/files/SWFUpload%20v2.2.0.1%20Core.zip

下载完后解压到某个目录,我这里放在labs.goodje.com/swfu目录下,该目录可自行修改。

自需要保留目录下的swfupload.js,Flash/swfupload.swf两个文件和plugins目录,其它的都可以删掉。

  • swfupload.js: swfupload的js脚本,封装swfupload.swf的各种接口供js调用,简化操作。
  • swfupload.swf: swfupload的核心所在,上传多个文件,提供上传进度,限制文件容量尺寸等提优于于上传表单功能的工具,实质是一个flash
  • plugins目录: swfupload的各种插件。其中swfupload.cookies.js用于解决ie中flash请求服务器时,请求头中不带cookie的bug。swfupload.queue.js插件提供更强大的上传队列功能,比如说取消队列等等。 swfupload.speed.js插件提供上传速度,上传剩余时间,以上传事件等信息。 swfupload.swfobject.js插件集成了swfobject库,用于将swfupload组件嵌入到dom中,而且新增了一个swfupload组件正在载入的事件。

快速入门

 新增一个上传页面,我们放在swfu下,但不一定非要放在swfu下,命名为tutor-1.html。

 head中插入用于引入swfupload.js的代码

  1. <script src="swfupload.js"></script>

然我我们还需要一个swfupload占位符和一个上传按钮。占位符用于当swfupload载入并初始化后被swfupload按钮替换的一个dom元素。

  1. <div id="swfu-placeholder"><!–swfupload文件选择按钮占位符,执行下面的js后,这里将被替换成swfupload上传按钮–></div>
  2. <div><input type="button" onclick="swfu.startUpload();" value="上传" /></div>

接着,载入并初始化swfupload.swf。

  1. var swfuOption = {//swfupload选项
  2.     upload_url : "http://labs.goodje.com/swfu/upload.php"//接收上传的服务端url
  3.     flash_url : "http://labs.goodje.com/swfu/Flash/swfupload.swf",//swfupload压缩包解压后swfupload.swf的url
  4.     button_placeholder_id : "swfu-placeholder",//上传按钮占位符的id
  5.     file_size_limit : "20480",//用户可以选择的文件大小,有效的单位有B、KB、MB、GB,若无单位默认为KB
  6.     button_width200//按钮宽度
  7.     button_height20//按钮高度
  8.     button_text点我选择文件//按钮文字
  9. }
  10. var swfu = new SWFUpload(swfuOption);//初始化并将swfupload按钮替换swfupload占位符

这样,我们点击“点我选择文件”便可以上传文件了,是不是so easy。[查看demo]

另外我们非常建议在开发的过程中启用debug模式,这个东西非常管用,在swfuOption中添加一个debug:true就可以了。

还有一点要特别注意:如果你的swfupload.swf域名和upload_url目录不在同一个域名下,请在upload_url域名下的根目录下创建一个crossdomain.xml文件,该文件主要是出于安全考虑的设计,目的是防止跨域的请求。该文件内容请参考:Flex中实现跨域web service调用时crossdomain.xml的issue(中文),以及官方资料Adobe Cross Domain Policy FileSpecification(英文)

美化按钮

现在swfupload按钮是不是太丑了,用户肯定不会喜欢的,就连能不能点我觉得用户都会这么想。好吧,那现在我们来美化它把。

一. 加上背景图片。

按钮分别有四种状态:1. 正常情况 2. 鼠标经过 3. 鼠标按下 4. 按钮被禁用。

知道了这四种状态我们就可以开始制作图片了,图片宽度为按钮的宽度,高度为按钮高度的四倍,四种状态的背景图片分别从上至下排列,中间没有缝隙,最终效果可以是这个样子。

  1. var swfuOption = {//swfupload选项
  2.     upload_url : "http://labs.goodje.com/swfu/upload.php"//接收上传的服务端url
  3.     flash_url : "http://labs.goodje.com/swfu/Flash/swfupload.swf",//swfupload压缩包解压后swfupload.swf的url
  4.     button_placeholder_id : "swfu-placeholder",//上传按钮占位符的id
  5.     file_size_limit : "20480",//用户可以选择的文件大小,有效的单位有B、KB、MB、GB,若无单位默认为KB
  6.     button_width215//按钮宽度
  7.     button_height45//按钮高度
  8.     button_text点我选择文件,//按钮文字
  9.     button_image_url"http://labs.goodje.com/swfu/swfu_bgimg.jpg",//按钮背景图片路径
  10.     debug:true
  11. }
  12. var swfu = new SWFUpload(swfuOption);

这里修改了button_width,button_height并且新增了button_image_url参数。

二. 优化按钮文字

swfupload有个好处就是可以将背景图片和文字分离,这个做的比较好,要是换文字不要找设计来弄,直接改代码就行了,另外,文字支持html标签,css控制样式,可以用来修改文字的字体颜色和大小,但是很坑爹的一点就是支持的html和css都不全,无法将文字剧中显示,这个太tm坑爹了。不过好在swf选项提供了button_text_top_paddingbutton_text_left_padding选项,可以用来控制文字离按钮顶部和左边的距离,灰常蛋疼,因为就算你这次调好了,下次增加或删除了文字、修改了文字大小后都需要再调,调好后效果如下。

再附上代码:

  1. var swfuOption = {//swfupload选项
  2.     upload_url : "http://labs.goodje.com/swfu/upload.php"//接收上传的服务端url
  3.     flash_url : "http://labs.goodje.com/swfu/Flash/swfupload.swf",//swfupload压缩包解压后swfupload.swf的url
  4.     button_placeholder_id : "swfu-placeholder",//上传按钮占位符的id
  5.     file_size_limit : "20480",//用户可以选择的文件大小,有效的单位有B、KB、MB、GB,若无单位默认为KB
  6.     button_width215//按钮宽度
  7.     button_height45//按钮高度
  8.     button_text<span class="btn-txt">选择文件</span>,//按钮文字
  9.     button_text_style.btn-txt{color: #666666;font-size:20px;font-family:"微软雅黑"},
  10.     button_text_top_padding6,
  11.     button_text_left_padding65,
  12.     button_image_url"http://labs.goodje.com/swfu/swfu_bgimg.jpg",//按钮背景图片路径
  13.     debug:true
  14. }
  15. var swfu = new SWFUpload(swfuOption);

这里分别修改了button_text,新增了button_text_style,button_text_top_padding以及button_text_left_padding。

高级应用

一. 事件

这里,所谓的事件就是因用户或计算机自动操作过程中产生的一些结果。

swfupload中包含很多事件,如用户点击“选择文件”按钮,文件选择框弹出前会触发fileDialogStart事件;用户点击上传按钮,swfupload响应并在上传前会触发uploadStart事件;文件上传过程中会不停的触发uploadProgress事件等等。

官方的解释:

SWFUpload在操作过程中会触发一系列事件,开发者可以利用这些回调的处理事件来控制UI,控制操作或者报告错误。

所有的事件都是在SWFUpload实例的上下文中调用的,因此在这些回调的事件中使用this能够直接访问到该触发该事件的实例对象。

所有事件应该在实例初始化时setting参数中预设完成。[详细事件列表]

二. 侦听事件

在swfupload初始化时,我们就必须侦听我们想侦听的事件,当然如果不侦听也不会出错,swfupload不做任何操作。

比如我们我们有这样的需求

  • 用户选择文件后自动上传,打开文件选择窗口后若未选择文件则不操作
  • 动态显示上传进度
  • 上传完成后提示文件上传是否成功
  • 增加“停止上传”按钮,用于在上传过程中停止上传,并将上传的文件回归到上传队列中
  • 文件上传过程中禁用“选择文件”按钮,文件上传完成或者中途取消上传恢复“选择文件”按钮

用户选择文件后自动上传需要侦听fileDialogComplete事件。我们要先定义一个函数:

  1. function fileDialogComplete(selectedNumqueuedNum) {
  2.     if (queuedNum &gt0) {//选择并添加到上传队列的文件数大于0
  3.         this.startUpload();//开始上传
  4.         this.setButtonDisabled(true);//禁用上传按钮
  5.     }
  6. }
  7.  
  8. //并在选项参数中加上该参数
  9. file_dialog_complete_handlerfileDialogComplete

该函数用于侦听文件选择对话框关闭的事件,如果用户选择并且成功加入上传队列的文件数大于0即立即开始上传,另外禁用上传按钮,以防出错。

动态显示上传进度需要侦听uploadProgress事件,另外我们还要在html中插入一个div用于显示上传进度。

  1. var statusE = document.getElementById(swfu-upload-status);//文件上传进度节点
  2. function uploadProgress(filecurBytestotalBytes) {
  3.     statusE.innerHTML = ['文件名:'file.name'
  4. 总尺寸:'totalBytes'B
  5. 已上传:'curBytes'B
  6. 进度:'parseInt((curBytes/totalBytes)*100), '%'].join(”);
  7. }
  8.  
  9. //并且在选项参数中加上该参数
  10. upload_progress_handler: uploadProgress

uploadProgress事件被触发后执行uploadProgress函数,并且给该函数传递三个参数,分别是当前上传的文件对象,当前以上传大小(单位:字节),当前上传的文件总大小(单位:字节)。

上传完成后提示文件上传是否成功需要至少侦听两个事件uploadError上传出错以及uploadSuccess上传成功,并建议侦听额外的一个uploadComplete事件,无论上传成功或者失败都会被触发。代码如下:

  1. //上传过程中出错
  2. function uploadError(fileerrCodemsg) {
  3.     statusE.innerHTML += ['
  4. 文件['file.name']上传出错,出错代码:['errCode'],出错原因:msg].join();
  5. }
  6.  
  7. //上传成功
  8. function uploadSuccess(filedata) {
  9.     statusE.innerHTML += ['
  10. 文件['file.name']上传成功,服务器返回信息:data].join();
  11. }
  12.  
  13. //上传完成,无论上传过程中出错还是上传成功,都会触发该事件,并且在那两个事件后被触发
  14. function uploadComplete(file) {
  15.     statusE.innerHTML += ['
  16. 文件['file.name']结束上传].join();
  17.     this.setButtonDisabled(false);//恢复上传按钮
  18. }
  19.  
  20. //并且在选项参数中加上该参数
  21. upload_error_handleruploadError,//文件上传出错
  22. upload_success_handleruploadSuccess,//文件上传成功
  23. upload_complete_handleruploadComplete//文件上传完成,在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有关的信息,而且防止与其它变量或者函数重名。

  1. custom_settings{name:zhangshan,age:15}
  2.  
  3. alert(swfu.customSettings['name']);
  4. alert(swfu.customSettings.age);

插件

插件不想多说,以Cookies插件为例讲一个。

这个插件主要目的为解决IE下的一个bug,flash不能将浏览器的cookie提交到服务器。

以至于服务端不能验证用户的登陆态,而在以插件形式允许的flash在FF或者chrome下就没有该问题。该插件的原理为使用js获取浏览器cookie,存放到请求的post数据中一起提交给服务器。这里需要注意的一点是,用户提交的post数据如果和cookie中某个数据重名会将覆盖掉cookie的值。

用法:

在head中载入插件的js,就可以了

  1. <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

本教程demo

你可能感兴趣的:(文件上传利器SWFUpload入门简易教程)