使用swfupload进行异步文件上传（java版）

??以前在做文件上传时，都是在页面上同步上传文件，当点击提交按钮时，提交表单，但是需要异步上传文件时就有点困难了。html5对文件上传有了很好的支持，通过新的API来完成异步文件上传。其实还有一种可行的方案，通过iframe来完成异步文件上传。使用swfupload进行文件上传是个不错的选择，它对异步文件上传有很好的支持。swfupload是一个利用flash进行文件上传的插件，用起来还是挺方便的，不过目前该插件已经停止了维护，官网也进不去了。swfupload下载地址可以参看相关下载部分。接下来主要完成一个上传的小例子：

本文目标

??为了增加本文的趣味性，本文将使用swfupload完成一个小的例子。例子要求：在页面上上传mp4格式的视频或者mp3格式的音频，上传成功后需要能够在页面上播放。

实现

??本文后台将使用struts2来上传文件，使用HTML5来播放视频和音频。为了完成上面的例子，我们首先引入相关的JS和CSS文件
CSS:

<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/upload.css">

JS:

<script type="text/javascript" src="js/swfupload.js"></script>
<script type="text/javascript" src="js/swfupload.queue.js"></script>
<script type="text/javascript" src="js/fileprogress.js"></script>
<script type="text/javascript" src="js/handlers.js"></script>

??fileprogress.js文件用来控制上传进度条，handlers.js包含了各种事件处理函数（可以根据需要进行修改），这两个文件是从官方的例子用拷贝出来的。
开发功能：

var upload;
window.onload = function() {
    upload = new SWFUpload({
        //文件上传URL
        upload_url: "upload.action",flash_url : "js/swfupload.swf",//传递参数,传递JSESSIONID是为了避免在火狐进行文件上传时，SWFUpload不传递JSESSIONID参数
        post_params: {"JSESSIONID" : "${cookie.JSESSIONID.value}"},//传递的文件name
        file_post_name: 'media',//文件上传设置
        //file_size_limit : "204800",// 200MB
        file_size_limit : "200 MB",// 200MB
        //文件类型
        file_types : "*.mp4;*.mp3",//文件类型描述
        file_types_description : "mp3 and mp4",//最多允许上传多少个文件
        file_upload_limit : "10",//一次最多允许选择5个文件
        file_queue_limit : "5",//为0表示无限制

        //事件
        file_dialog_start_handler : fileDialogStart,file_queued_handler : fileQueued,file_queue_error_handler : fileQueueError,file_dialog_complete_handler : fileDialogComplete,upload_start_handler : uploadStart,upload_progress_handler : uploadProgress,upload_error_handler : uploadError,upload_success_handler : uploadSuccess,upload_complete_handler : uploadComplete,//按钮
        //按钮占位id
        button_placeholder_id: 'spanButtonPlaceholder',//按钮文本
        button_text: '<span class="btnText">选择文件</span>',button_text_style : ".btnText { font-size: 12px; width: 61px; text-align: center; }",button_text_top_padding: 3,button_image_url: 'images/XPButtonNoText_61x22.png',button_width: 61,button_height: 22,button_cursor: SWFUpload.CURSOR.HAND,button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,debug: false,//自定义设置
        custom_settings : {
            progressTarget : "upload",audioTarget : "audio",videoTarget : "video",cancelButtonId : "btnCancel"
        },});
};

??swfupload核心类SWFUpload，创建这个类的对象时，需要向构造器中传递一个配置，配置文件只有包含4个部分：文件上传相关配置项，回调函数，上传按钮配置， 自定义配置。大部分的设置根据字面意思很容易理解是什么意思。
??注意：在某些版本的火狐浏览器中，用swfupload进行文件上传时，是不回传递JSESSIONID的，所以需要加上post_params: {"JSESSIONID" : "${cookie.JSESSIONID.value}"}这项配置。也可以使用swfupload的cookie插件swfupload.cookies.js。
上传时效果图：

swfupload开发参考

配置中常用属性说明

各种回调函数

swfupload实例方法

文件信息对象 File Object

在事件监听函数中，经常要用到文件信息对象来获取文件的信息以供下一步的操作

队列状态对象 Stats Object

用来获取当前队列的状况

swfupload中定义的一些常量

定义的一些常量，便于理解

??上面列出了swfupload常用的一些东西，更多详细的内容可以查看官方的文档。

总结

??swfuplaod功能还是挺强大，可惜已经停止维护了，如果有其他好用的文件上传框架就有其他的吧！
swfupload开发流程：
- 将swfuplaod相关文件导入工程。
- 引入swfupload相关的JS,CSS。
- 实例化SWFUpload,并配置相关参数。
- 根据需求编写自己的事件处理函数，并配置到配置项。
- 调试，可以将SWFUpload配置debug设置为true，直到得到满意的结果。

相关下载

• swfupload下载地址：http://sourceforge.net/projects/swfupload.mirror/files/?source=navbar
• 本文源代码下载地址：http://download.csdn.net/detail/qq791967024/9175479

推荐文章

• 文件上传利器SWFUpload使用指南
• SWFUpload学习记录
• 使用 swfuplaod3.5+servlet 实现多图片上传