EasyUI file-box+SpringMVC 单个或多个图片上传

Do not go gentle into that good night

网上关于图片上传的文章有很多，这篇文章介绍的是使用EsayUI和SpringMVC结合，通过EsayUI的file-box 控件实现单个或者多个图片简单的上传功能，本文没有涉及图片回显；

首先介绍软件环境，最开始任务下来的时候不会这个功能，上网进行了大量查找；最后实现了发现实际上代码并不复杂，但由于网上很多博文都没有仔细介绍软件环境，而实际开发中很多问题和环境或者版本有很大关系；

导致作为新人的我在搭建环境上花费了近于开发三倍多的时间，故此之后每篇博文都尽量在最开始给出开发环境，便于以后的阅读和使用方便；

开发环境：

Eclipse 4.3  
jdk1.7.0_72  
apache-maven-3.0.4
apache-tomcat-7.0.53
spring-mvc-4.0
spring-beans-4.0
mybatis-3.2.8
oracle 11.2.0.3.0

所需jar包：

commons-io-2.4
commons-fileupload-1.3

关于文件上传的思路都大同小异，主要思路就几步：

• 页面控件获取用户上传文件；
• 后台接收文件，一般以流形式获取；
• 对文件进行操作（保存到指定位置或者进行解析，本文中只涉及保存）

关于接收文件流这部分，网上有很多方法；

先说明一下： 本文中在后台使用了一个pojo对象的MultipartFile属性作为前台传入文件流的接收端；

---

下面我按照上面的步骤进行代码的说明； 首先要做的是将需要的jar包导入到工程中，这个不做赘述；

配置SpringMVC：

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
        <property name="defaultEncoding" value="UTF-8"/>  
</bean> 

这个节点还可以对上传文件的大小做限定，具体可以查看文末reference； 然后是页面的上传控件配置；

页面代码-JSP：

<form id="rundApplyFrom" method="post" enctype="multipart/form-data"> 
	<tr id="trIdCard"> 
		<td>msg:</td> 
		<td><input class="easyui-filebox" id="uploadId" name="sourceFile" style="width:200px"></td>
	</tr>
</from>

<!-- 这里的name属性需要和controller方法中用于接收上传文件Bean中的byte[]字段名字相同 -->

像注释中提到的，这里name用于后台配置jopo来接收前台上传的文件的属性； 需要和属性name保持一致，后面java代码部分会详说； 页面代码-JS

function uplodad(
	$('#fromNameId').form({    
		url:'controllerurl',    
		onSubmit: function(){
		    //uploda before something
				                     
		},success:function(data){    
		    //upload after something

		},error:function(date){
			$.messager.alert(data.errormsg);
		}  
	});    

	$('#fromNameId').submit();
);

用于接收文件的pojo：

public class PojoBeanClassName implements Serializable {

	   private String prosn  ; 
	   private String applyid; 
	   private byte[] annex  ; 
	   private Object content;
	   private MultipartFile[] sourceFile;

// sourceFile geter, seter

本文中需求是多文件上传，所以这里使用了一个MultipartFile数组来接收文件；

注意：前面页面代码的注释中提到的，这个MultipartFile属性的名字需要和页面上file-box控件中的name属性相同，这样在提交表单的时候才能确保SpringMVC能将文件接收到后端；

Controller中接收文件上传的方法；

public void uplodaApplyFile(AReFundApplyProcess arProcess, AReFundApply aRefundApply){
	
	MultipartFile[] uploadfile=arProcess.getSourceFile();
	//这里用于获取前台传入Bean中Byte字段中的流；
	//因为案例中是多文件上传，所以是数组；
	
	InputStream fileIs= null;			
	aRefundApply.setOrderno(arProcess.getProsn());
	
	try {
		if(uploadfile != null&& uploadfile.length>0){
			for (int i = 0; i < uploadfile.length; i++) {
				MultipartFile file=uploadfile[i];
				fileIs= file.getInputStream();
				byte[] b = FileCopyUtils.copyToByteArray(fileIs);
				if(b.length>0){
					arProcess.setAnnex(b);
					aReFundApplyCheckService.insertAReFundApplyProcess(arProcess);
				}
			}
		}
	} catch (IOException e) {
		log.error("上传文件异常...",e);
	}
}

这里的setAnnex() 方法将转换完成的文件流存入了jopo中的bayte[]类型的字段； 由于byte[]可以和file类型或者strem类型任意转换，后期就可以对进行需要的处理了；

【Reference Material】

• http://blog.csdn.net/songanling/article/details/38951013

---

【End】

转载于:https://my.oschina.net/timescript/blog/520707