【学习】SWFUpload在Spring mvc框架下的上传示例

1、本文框架：
SWFUpload：2.2.0
Spring mvc 3.2.3

2、SWFUpload官方示例：http://demo.swfupload.org/v220/index.htm
官方文档：http://demo.swfupload.org/Documentation/

3、示例
我这边的示例取自官方示例：Simple Demo（http://demo.swfupload.org/v220/simpledemo/index.php），前台属性设置的比较全，有些是可以省略的。

3.1 前台示例

demo.jsp
引入资源：

<!-- swfupload -->
<link rel="stylesheet" href="common/swfupload/css/default.css" type="text/css"/>
<script type="text/javascript" src="common/swfupload/swfupload.js"></script>
<script type="text/javascript" src="common/swfupload/simple/swfupload.queue.js"></script>
<script type="text/javascript" src="common/swfupload/simple/fileprogress.js"></script>
<script type="text/javascript" src="common/swfupload/simple/handlers.js"></script>

JS代码：

<script type="text/javascript">
	$(function(){
		var swfu;

		window.onload = function() {
			var settings = {
				flash_url : "common/swfupload/swfupload.swf",
				upload_url: "common/upload.htm?jsessionid=<%=request.getSession().getId()%>",
				file_size_limit : "100 MB",
				file_types : "*.*",
				file_types_description : "All Files",
				file_upload_limit : 100,
				file_queue_limit : 0,
				custom_settings : {
					progressTarget : "fsUploadProgress",
					cancelButtonId : "btnCancel"
				},
				debug: false,
				// Button settings
				button_image_url: "../common/swfupload/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
				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,
				queue_complete_handler : queueComplete	// Queue plugin event
			};
			swfu = new SWFUpload(settings);
	     };
	})
	
        //上传成功后函数
	function uploadSuccess(file, serverData) {
		var data = eval("(" +serverData + ")");
		$("#imgbox").html("<img src=\""+data.url+"\"/>")
	}
</script>

JSP正文代码：

<label>首页大图</label>
<form id="form1" action="index.php" method="post" enctype="multipart/form-data">
    <p>This page demonstrates a simple usage of SWFUpload.  It uses the Queue Plugin to simplify uploading or cancelling all queued files.</p>
    <div class="fieldset flash" id="fsUploadProgress">
        <span class="legend">Upload Queue</span>
    </div>
    <div id="divStatus">0 Files Uploaded</div><div>
        <span id="spanButtonPlaceHolder"></span>
        <input id="btnCancel" type="button" value="Cancel All Uploads" onclick="swfu.cancelQueue();" disabled="disabled" style="margin-left: 2px; font-size: 8pt; height: 29px;" />
    </div>
</form>

<!--预览上传好的图-->
<span id="imgbox"></span>

至此，前台代码已OK，打开demo.jsp，效果如下：


3.2 后台Spring mvc示例（即：上面JS代码中的upload_url的访问地址: "common/upload.htm"）

@Controller
@RequestMapping(value="common")
public class SWFController {
protected final transient Log log = LogFactory.getLog(SWFController.class);
	private static String UPLOADFILE = "uploadfile";
        //获取绝对路径的工具类	
        @Autowired
	private RealPathResolver realPathResolver;
	
	@RequestMapping(value = "upload")
	public void uploaddefault(@RequestParam(value = "Filedata", required = false) MultipartFile file,
	HttpServletRequest request, HttpServletResponse response,HttpSession session,ModelMap model) throws Exception {
	ResponseUtils.renderJson(response,uploaddesc(file, request, response));
	}
	
	private String uploaddesc( MultipartFile file,HttpServletRequest request, HttpServletResponse response) throws Exception
	{
		String fileName = file.getOriginalFilename();
		String rootPath = realPathResolver.get("/");
		SimpleDateFormat sdf = new SimpleDateFormat("yyyyMM/dd");
		String ymd = sdf.format(new Date());
		File f = new File(rootPath, file
				.getOriginalFilename());
		String newfilename = FileUtil.randomReName(f.getAbsolutePath());
		String url = UPLOADFILE + "/" + ymd;
		File dirFile = new File(rootPath+url);
		if (!dirFile.exists()) {
			dirFile.mkdirs();
		}
		url+=newfilename;
		try {
			file.transferTo(new File(rootPath+url));
			return "{'success':true,'url':'"+url+ "','filename':'" + fileName + "','newfilename':'"+newfilename + "'," +
			"'state':'SUCCESS','title':'"+fileName+"','original':'"+fileName+"','type':'"+FilenameUtils.getExtension(f.getName())+"'}";
		} catch (Exception e) {
			log.error("upload error!", e);
			throw e;
		}
	}
}

注：
1、realPathResolver.get(String path);方法是获取系统的绝对路径，代码略。
2、FileUtil.randomReName(String fileName);方法是根据传入的文件名随机重命名，代码略。


uploaddesc方法的return结果示例如下：（url可供前台预览用）
{'success':true,'url':'uploadfile/201309/25201335251535583028.jpg','filename':'QQ图片20130922161855.jpg','newfilename':'201335251535583028.jpg','state':'SUCCESS','title':'QQ图片20130922161855.jpg','original':'QQ图片20130922161855.jpg','type':'jpg'}

前台效果如下：


----------------------------------------
解释：
1、uploaddefault方法获取File用了注解方式，也可以用其它方式，比如：

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;  
CommonsMultipartFile file = (CommonsMultipartFile) multipartRequest.getFile("Filedata");

2、JSP表单的属性中加上：enctype="multipart/form-data"

3、关于session会丢失的问题解决办法。

做个实验看看是否是在上传的时候session新建了，而不是原来的session。

先在项目中加上session值，如下：（可以登陆的时候加）

session.setAttribute("admin", logsys);//logsys是个JAVA实体类，具体略

demo.jsp中打印session：

sesseion:${sessionScope.admin} 

在上传前页面上显示：sesseion:com.pojo.SysUserinfo@1adb4f9c，说明session的admin值是存在的。

在上传的方法中（上述后台uploaddefault方法）中取出session为admin的值，结果发现SysUserinfo类的值为null。说明session丢失了。

解决方法是在url中加上jsessionid：upload_url: "common/upload.htm?jsessionid=<%=request.getSession().getId()%>",
（不过百度编辑器的swfupload并没有session丢失的现象。

4、要是上传多张图片，并需要预览，可以使用jquery的插件：lightbox。
官方网站：http://leandrovieira.com/projects/jquery/lightbox/

-----------------------------------
**********参考资料**********
http://www.cnblogs.com/2050/archive/2012/08/29/2662932.html