客户端上传工具－SWFUpload

最近，在后台实现广告管理系统，有一个表单选项，想利用SWFUpload组件来实现。如今将该组件的认识和理解记录以下:方便有须要的同行查看.

1、首先来比较下目前的几种的客户端上传：

一、File表单

使用标准的HTML元素提供的File表单是最原始、传统的上传方式，他的优点在于浏览器的普遍兼容性，除了服务端须要处理Files信息之外，不须要额外的处理程序便可完成文件上传。

但使用File表单上传文件会形成页面的刷新，尤为是在上传大文件的时候，在文件上传过程当中，用户须要傻等在一个空白页面前，没有任何反馈信息来提示用户当前的上传进度。同时没法在客户端对文件大小作检测。

二、IFrame结合File表单

使 用一个含有file表单的iframe来完成文件上传，可以避免文件上传过程当中的页面刷新，在必定程度上改进了用户体验，但一样没有解决大文件上 传时候缺乏反馈信息的问题。相比File表单上传，此方式还须要对程序作额外的处理，同时须要JS的支持，复杂度稍微增长了一些。

三、IFrame、File表单结合AJAX

在方式2的基础上引入AJAX来实时跟服务端脚本获取当前的上传进度，实现了页面无刷新、实时更新上传进度的功能。但程序的复杂度又增长了一个级别，因为要不断跟服务端发送请求，同时也增长了服务端的压力。

四、Activex控件

使用控件方式完成的上传在功能和效率上都很不错，页面无刷新、显示上传进度、批量上传，我的认为遗憾就在于须要在浏览器上安装控件，并且只能支持IE，弹出那么个安装提示可能会吓倒多数用户，开发的复杂度也提升了。

 五、Flash

Flash的FileReference类提供了文件上传功能，相对于传统的File表单而言，Flash上传可以获取客户端的文件的更多信息反馈，例如文件大小、类型、建立、修改时间等，利用这些信息能够在客户端对文件进行类型和大小等属性的一次过滤。

FileReference类提供了多文件上传功能。

Flash直接向服务端发送文件数据，所以Flash自己是能够随时知道文件上传数据而显示上传进度，而不须要使用AJAX的方式不断跟服务端发送请求增长服务端的压力。

 弊端在于客户端须要Flash播放器的支持，并且在一个页面中插入一个Flash，从UI元素的统一角度来看，彷佛有些别扭，若是页面须要更改风格，那么Flash还须要从新修改而后编译，并且程序开发的复杂度也提升了。

六、Flash结合JavaScript

在方式5的基础上，将Flash隐藏起来，利用JavaScript来控制Flash元素处理文件上传，Flash使用 ExternalInterface来完成跟JavaScript的通讯，将页面元素的控制权交给JS。这样就避免了方式5中的UI元素不统1、修改不灵 活的弊端。但代价就是Flash程序开发的复杂度再次提升了，同时也须要更高的JS和XHTML开发能力。

以 上列举了目前我所了解的浏览器环境下文件上传的方式，并对其优劣都作了简单的罗列，在实际开发中咱们能够根据本身的应用来选择合适的方式，假如我 们的需求只是用户给本身上传一个10K不到的头像，若是咱们还大费周折地实现了头像上传的进度提示，那就是事倍功半了，由于在目前的绝大多数网络状况下， 一个10K的文件传输是一眨眼的功夫。

 2、关于SWFUpload

若是项目中在浏览器环 境下须要高级上传功能，那么我我的认为使用方式6是最合适的选择，而SWFUpload在很大程度上下降了开发的复杂度，它提 供了一个编译好的不包含任何UI元素的Flash影片，并将浏览器的中UI交给开发人员来控制。开发人员可以利用 XHTML,CSS,Javascript来定制符合他们网站风格的UI上传元素。而后使用它提供的一组简单的JS事件来更新上传状态，开发人员可以利用 这些事件来及时更新页面中的上传进度UI，针对错误、异常等给用户反馈。

关于SWFUpload的使用，我已经将官方文档结合本身使用的关键点作了一个翻译和备注，可见SWFUpload翻译，网上也常常有朋友问我要例子演示，实际上官方的demo就是很好的例子，本身下载下来仔细看看问题不大的。这里我只是想针对一些朋友问起过的问题的误区来回答下SWFUpload不能作什么。

一、它不能在服务端写文件

你 能够把SWFUpload理解成是一个功能更强大一点的file表单，它的能力范围仅仅在客户端做用，它只能往upload_url对应的服务端 程序发送文件数据，并不能本身自动在服务端写一个文件。所以upload_url对应的服务端程序须要跟接收传统的File表单信息同样接收Flash传 递过来的文件信息，而后根据本身需求完成该文件的存储。

二、它不能保留原有的Session进程

SWFUpload在上传时至关于从新开辟了一个新的Session进程，所以没法与原有程序的Session保持一致，这就形成了你没法像传统的表单上传那样访问客户端标识。

若是你须要这个客户端标识，那么就须要额外程序处理了。你能够在发送文件信息以前，利用JS将获取的Cookie信息写入到SWFUpload的配置中，若是你使用的是FLASH9版本，你还能够把这个信息写入到POST变量中一同发送。

或者在页面初始化SWFUpload实例的时候，能够直接将客户端标识写入在设置中（例如，在upload_url中增长客户端标识），无需随后使用JS来增长标识。

三、在选择文件的时候，它不会让超出文件大小限制的文件不可见

假如你设置的是容许用户上传3M如下的JPG图片，那么当用户打开文件选择对话框时，他只能看到系统中的文件夹和JPG图片，类型过滤是有效的，但大小过滤无效，也就是说你看到的文件并不是都是3M如下的。

实际上文件大小的过滤是在文件入队的时候进行的，若是你选择的是一个5M的文件加入队列，那么会触发一个QueueError事件来提示你该文件没有经过过滤检测。

四、即便你用的是Flash9版本，它也不能自动把你的表单一块儿自动提交到服务端

AS3中新的URLRequest对象让文件上传的时候能够一同发送POST变量，但这一过程并非自动的，所以当你上传文件的时候，SWFUpload尚未智能到自动识别你的Form中的全部表单元素，并把他们一块儿POST到服务端。

若是你确实有这个需求，那么在上传前，你可使用JS将目标表单的name和value构形成值对，而后使用addPostParam或者addFileParam方法来设置POST变量跟文件一同提交到服务端。

若是不想采起这种方式，那么还有个省力的方式。你能够先上传文件，当该文件上传完成之后利用JS来提交Form表单，由服务端逻辑来完成这两次“异步”提交数据的关联性，该实现方式的过程跟IFrame结合File表单实现异步上传相同。

五、它不能自动完成多文件上传 

SWFUpload 提供文件多选功能，但并无提供多文件自动上传功能。多选的文件都会插入到上传的文件队列中，若是你要完成多文件上传，那么能够 在uploadComplete事件的回调中调用startUpload方法来启动下一个文件的上传。如此进行下去，直到整个文件队列中的文件所有自动上 传完成，整个上传才会中止。

六、它不能真正限制用户上传的文件数量

设置中的file_upload_limit只是针对当前页面中的一个SWFUpload实例有效，当页面刷新，该值就被恢复重置了。它并不能记住先前的上传数量。若是你须要严格限制用户上传的文件数量，那么就须要经过服务端逻辑来实现。

七、它不是“多线程”的，一个时间点只能上传一个文件

SWFUpload虽然能完成多文件上传，但它是“单线程”的，当此刻有文件上传的时候，没法启动下一个文件上传，必须等待当前文件上传结束（退出、中止、上传完毕）。