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

[b]1、本文框架：[/b]
SWFUpload：2.2.0
Spring mvc 3.2.3

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

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

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>

[color=blue]至此，前台代码已OK，打开demo.jsp，效果如下：[/color]
[img]http://dl.iteye.com/upload/picture/pic/127713/fd9ec9d8-023c-3628-aca8-ad49b708f027.jpg[/img]

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;
		}
	}
}

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


[b]uploaddesc方法的return结果示例如下：[/b]（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'}

前台效果如下：
[img]http://dl.iteye.com/upload/picture/pic/127715/7323b560-7216-37d7-8436-ae4087c41044.jpg[/img]

----------------------------------------
[color=red][b]解释：[/b][/color]
[b]1、uploaddefault方法获取File用了注解方式，也可以用其它方式，[/b]比如：

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

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

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

做个实验看看是否是在上传的时候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丢失了。

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

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

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