【Struts2】plupload组件结合struts2完成上传功能

背景

前几天因为工作需要换上传组件，以前用的是uploadify，uploadify由于浏览器flash的关系，不兼容，所以找到了这个plupload这个组件。

组件下载

去官网下载plupload，组件下载地址：http://www.plupload.com/download/

代码示例

js代码如下

function initPlupload(){
		var uploader = new plupload.Uploader({
	    	runtimes : 'html5,flash,silverlight,html4',
	    	browse_button : 'pickfiles', // you can pass an id...
	    	container: document.getElementById('container'), // ... or DOM Element itself
	    	url : '<%= request.getContextPath()%>/test/uploadFile.shtml',
	    	flash_swf_url : '${ctxPath}/js/plupload-2.2.1/Moxie.swf',
	    	silverlight_xap_url : '${ctxPath}/js/plupload-2.2.1/Moxie.xap',
	    	
	    	filters : {
	    		max_file_size : '10mb',//限制文件大小
	    		mime_types: [
	    			{ title : "Excel files", extensions : "xlsx,xls"}
	    		],//限制文件类型
	    		prevent_duplicates : true //不允许选取重复文件
	    	},

	    	init: {
	    		PostInit: function() {
	    			document.getElementById('filelist').innerHTML = '';
	    			
	    		},

	    		FilesAdded: function(up, files) {
	    			if(up.files.length>1) {
	    				alert("只允许上传单个文件！")
                        return;
                    }
	    			plupload.each(files, function(file) {
	    				document.getElementById('filelist').innerHTML += '<div id="' + file.id + '"><font style="color:#666666;" size="2">' + file.name + ' (' + plupload.formatSize(file.size) + ')</font> <b></b></div>';
	    				up.start();
	    			});
	    		},

	    		UploadProgress: function(up, file) {
	    			document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
	    		},
	    		
	    		UploadComplete: function(up, file) {
	    			if(up.files.length<1) {
	    				alert("请点击选择文件，再进行上传！");
                        return;
                    }
	    			alert("上传成功！");
	    			up.destroy();
	    		},
	    		
    		FileUploaded:function(uploader,file,responseObject) {
	    			var response = JSON.stringify(responseObject.response);
	    			$("#saveFileName").val(response);
	    		},

	    		Error: function(up, err) {
	    			alert("上传失败，"+err.message);
	    		}
	    	}
	    });

	    uploader.init();

html代码

<center>
	<input type="hidden" id="saveFileName"/>
	<div id="container">
		<button id="pickfiles">上传文件</button></div>
	<div id="filelist" ><font style="color:#666666;" size="2">您的浏览器未安装 Flash, Silverlight, Gears, BrowserPlus 或者支持 HTML5.</font></div>
</center>

java代码

public class TestAction {
        
	private String fileFileName; //文件名称
	private String fileContentType; //文件类型  
	private File file; //上传过来的文件
	
	private String saveFileName;
	
	@Autowired
	private YLService ylService;
	
	public void uploadFile() throws Exception {
		
		String savePath = PropertyHelper.getProp ("conf.pl.filePath");
		
		String fileName = DateUtil.format(new Date(), "yyyy-MM-dd");
		String name = null;
		File uploadfile = null;
		String saveFileName = null;
	        name = UUID.randomUUID().toString().replace("-", "");
		saveFileName = fileName + "/" + SessionFilter.getLoginUserOrgan().getMoId() + "/" + name + "_" + fileFileName;
		uploadfile = new File(savePath, saveFileName);
		if (!uploadfile.getParentFile().exists()) {
			uploadfile.getParentFile().mkdirs();
		}
		FileOutputStream fos = null;
		FileInputStream fis = null;
		try {
			fos = new FileOutputStream(uploadfile);
			fis = new FileInputStream(file);
			byte[] buffers = new byte[1024];
			int len = 0;
			while ((len = fis.read(buffers)) != -1) {
				fos.write(buffers, 0, len);
			}
		} finally {
			fos.close();
			fis.close();
		}
		this.getHttpServletResponse().getWriter().print(saveFileName);
		
	}

	/*
	* 此处省略getter和setter方法；
	*/
}

struts2的xml配置

<package name="test" extends="struts-base" namespace="/test">
	<action name="uploadFile"  class="TestAction" method="uploadFile" />
</package>

注意：
plupload的几个函数，上传前，上传中，上传后，以及获取后台返回值的函数。

参考

前端上传组件Plupload使用指南