SpringMVC+SwfUpload进行多文件同时上传

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

由于最近项目需要做一个多文件同时上传的功能，所以好好的看了一下各种上传工具，感觉uploadify和SwfUpload的功能都比较强大，并且使用起来也很方便。SWFUpload是一个flash和js相结合而成的文件上传插件，而且该插件可以用在php、.net、Java等项目开发中。在使用的过程中需要引入两个js文件，并且进行相关参数的配置，同时也可以定义一系列的事件，如：上传成功事件，上传失败事件，正在上传事件等等。由于我在项目开发是使用SpringMVC进行的，所以下面我根据我自己的项目简述一下SwfUpload如何整合到Web项目中去。

首先说一下Swfupload相对于HTML中file标签上传的优点：

允许一次上传多个文件，但会有一个上传队列，队列里文件的上传是逐个进行的，服务器端接收文件时跟普通的表单上传文件是一样的(相当于表单一次提交了一个file，但是提交了多次，后台处理的时候只需要处理一次即可);
用flash进行上传，页面无刷新，且可自定义Flash按钮的样式，类似AJAX的无刷新上传，里面可以引入swf文件实现动态效果；
可以显示上传进度，也可以在浏览器端就对要上传的文件格式，大小等进行配置(只需要配置一个参数即可，比用js的数据验证要好很多)；
良好的浏览器兼容性并且兼容其他JavaScript库 (例如：jQuery,EXT, Prototype等)；一般含有flash插件的即可正常运行，但是好像最低要求flash的版本要达到flash9;
SwfUpload还提供了丰富的事件接口供开发者使用;开发者可以自定义各种和上传相关的事件；

SWfUpload实现文件的上传流程如下：

1、引入相应的js文件（swfupload.js和swfupload.queue.js必须引入）
2、实例化SWFUpload对象，传入一个配置参数对象进行各方面的配置。
3、点击SWFUpload提供的Flash按钮(也可以更改配置信息中的button_image_url参数来配置自己的按钮)，弹出文件选取窗口选择要上传的文件；
4、文件选取完成后符合规定的文件会被添加到上传的队列里；
5、调用startUpload方法让队列里文件开始上传；
6、文件上传过程中会触发相应的事件（想要触发什么事件需要自己定义，但是一般网上搜一下就可以了，大部分定义都相同，我也会贴出我的代码），开发者利用这些事件来更新ui、处理错误、发出提示等等；

下面说我的项目中SpringMVC+SwfUpload的配置过程及代码：

引入相应的JS文件后实例化SwfUpload对象（JS代码，一般嵌入到jsp文件中或者单独写一个文件引入到jsp页面内）：

var swfu; window.onload = function() {
var settings = {
flash_url : "swfupload/swfupload.swf",
flash9_url : "swfupload/swfupload_fp9.swf",
upload_url: "http://localhost:8080/ams/upload/fileUpload.do",
post_params: {"PHPSESSID" : "aa"},
file_size_limit : "100 MB",
file_types : "*.*",
file_post_name : "filedata",
file_types_description : "All Files",
file_upload_limit : 100,
file_queue_limit : 0,
custom_settings : {
progressTarget : "fsUploadProgress",
cancelButtonId : "btnCancel"
},
debug: true, // Button settings
button_image_url: "images/TestImageNoText_65x29.png",
button_width: "65",
button_height: "29",
button_placeholder_id: "spanButtonPlaceHolder",
button_text: '<span class="theFont">Hello</span>',
button_text_style: ".theFont { font-size: 16; }",
button_text_left_padding: 12,
button_text_top_padding: 3, // The event handler functions are defined in handlers.js
swfupload_preload_handler : preLoad,
swfupload_load_failed_handler : loadFailed,
file_queued_handler : fileQueued,
file_queue_error_handler : fileQueueError,
upload_start_handler : uploadStart,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess
}; swfu = new SWFUpload(settings);
};

编写相关的监听事件（JS代码，即html引入的handler.js文件）：

编写HTML页面：

<!DOCTYPE html>
<html>
<head>
<title>SWFUpload Demos - Simple Demo</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="swfupload/swfupload.js"></script>
<script type="text/javascript" src="swfupload/swfupload.queue.js"></script>
<script type="text/javascript" src="js/fileprogress.js"></script>
<script type="text/javascript" src="js/handlers.js"></script> <body>
<div id="header">
<h1 id="logo"><a href="../">SWFUpload</a></h1>
<div id="version">v2.5.0</div>
</div> <div id="content">
<h2>External Interface Demo</h2>
<form id="form1" action="index.php" method="post" enctype="multipart/form-data">
<p> This page tests rebuilding the External Interface after some kind of display change. This demo isn't meant for building upon. Rather it
helps test whether a particular browser is suffering from this bug.</p> <div class="fieldset flash" id="fsUploadProgress">
<span class="legend">Upload Queue</span>
</div>
<div id="divStatus">0 Files Uploaded</div>
<div id="divMovieContainer">
<span id="spanButtonPlaceHolder"></span>
<input type="button" value="Start Upload" onclick="swfu.startUpload();" style="margin-left: 2px; font-size: 8pt; height: 29px;" />
</div> </form>
</div>
</body>
</html>

后台处里代码：

首先要配置SpringMVC配置文件，在配置文件中加入下面内容

服务器接收程序：

@ResponseBody
@RequestMapping("/fileUpload.do")
public String fileUpload(HttpServletRequest request,@RequestParam("filedata")MultipartFile file) throws Exception { request.setCharacterEncoding("utf-8");//解决乱码问题
try{
String uploadDir = request.getServletContext().getRealPath("/upload");//获取上传目录的路径
//获得目录，如果目录不存在，则创建目录
File dirPath = new File(uploadDir);
if (!dirPath.exists()) {
dirPath.mkdirs();
}
//开始文件上传
InputStream inputStream = file.getInputStream(); //获得输入流
String fileName = file.getOriginalFilename(); //获得原始名字 String fileNameFull = uploadDir + "/" + fileName;
OutputStream outputStream = new FileOutputStream(fileNameFull);//获得输出流
int bytesRead = 0;
byte[] buffer = new byte[8192]; while ((bytesRead = inputStream.read(buffer, 0, 8192)) != -1)
{
//输出到目标文件夹
outputStream.write(buffer, 0, bytesRead);
}
outputStream.close();
// close the stream
inputStream.close();
}catch(Exception e){
e.printStackTrace();
return "error";
}
return "ok";
}

这样经过上面的配置即可完成多文件同时上传的例子了，注意的地方有几点：

一是中文名乱码问题，解决办法：

1.在Java程序内加入一行代码:request.setCharacterEncoding("utf-8");

2.进行编码转换，fileName = new String(fileName.getBytes("GBK"),"UTF-8");//反正就是进行编码的转换

3.好像还有其它的方法，但是我也不太懂了

还有一点是后台获得file的时候名字问题：

后台获得file是一个一个获取的，即如果你上传10个文件，那就是分十次来调用后台Java代码的，每次调用上传一个文件，所以后台只需要对一个文件进行处理即可，这些文件传递到后台的name属性值是相同的，通过 file_post_name : "filedata"来进行配置，这个时候后台获取file只要通过filedata即可了！

这是我初步了解了SwfUpload之后进行记录的内容，希望以后自己能回来翻看学习。