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

最新推荐文章于 2024-09-24 08:25:04 发布

sunjc27

最新推荐文章于 2024-09-24 08:25:04 发布

阅读量3.2k

点赞数

分类专栏： web 前端

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

web

3 篇文章 0 订阅

订阅专栏

凡做过网站开发的都应该知道表单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的代码

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

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

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

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

 
  var swfuOption = {//swfupload选项
     upload_url : "http://labs.goodje.com/swfu/upload.php", //接收上传的服务端url
     flash_url : "http://labs.goodje.com/swfu/Flash/swfupload.swf",//swfupload压缩包解压后swfupload.swf的url
     button_placeholder_id : "swfu-placeholder",//上传按钮占位符的id
     file_size_limit : "20480",//用户可以选择的文件大小，有效的单位有B、KB、MB、GB，若无单位默认为KB
     button_width: 200, //按钮宽度
     button_height: 20, //按钮高度
     button_text: ‘点我选择文件‘//按钮文字
 }
 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. 按钮被禁用。

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

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

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

二. 优化按钮文字

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

再附上代码：

 
  var swfuOption = {//swfupload选项
     upload_url : "http://labs.goodje.com/swfu/upload.php", //接收上传的服务端url
     flash_url : "http://labs.goodje.com/swfu/Flash/swfupload.swf",//swfupload压缩包解压后swfupload.swf的url
     button_placeholder_id : "swfu-placeholder",//上传按钮占位符的id
     file_size_limit : "20480",//用户可以选择的文件大小，有效的单位有B、KB、MB、GB，若无单位默认为KB
     button_width: 215, //按钮宽度
     button_height: 45, //按钮高度
     button_text: ‘<span class="btn-txt">选择文件</span>‘,//按钮文字
     button_text_style: ‘.btn-txt{color: #666666;font-size:20px;font-family:"微软雅黑"}‘,
     button_text_top_padding: 6,
     button_text_left_padding: 65,
     button_image_url: "http://labs.goodje.com/swfu/swfu_bgimg.jpg",//按钮背景图片路径
     debug:true
 }
 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事件。我们要先定义一个函数：

 
  function fileDialogComplete(selectedNum, queuedNum) {
     if (queuedNum &gt; 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也不是个很复杂的东东。

插件

插件不想多说，以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

本教程demo