SpringMVC 实现图片上传功能（MultipartHttpServletRequest）

一.主要流程

用户使用Form方式提交到服务端来上传图片，然后回显在页面上。

扩展：WEB前端上传图片的几种方法

二.组件定义

比较常见的文件上传组件有Commons FileUpload和COS FileUpload，Spring已经完全集成了这两种组件，这里我们选择Commons FileUpload。 

文献资料：MultipartFile实现文件上传。

三.Commons FileUpload实现方式

由于POST一个包含文件上传的Form会以multipart/form-data请求发送给服务器，必须明确告诉DispatcherServlet如何处理MultipartRequest。首先在

spring-mvc.xml配置文件中声明一个MultipartResolver：

 <!-- 上传文件的设置 ，maxUploadSize=-1，表示无穷大。uploadTempDir为上传的临时目录 --> 
<bean id="multipartResolver" 
            class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
    <!-- 设置上传文件的最大尺寸为10MB 10*1024*1024 -->  
    <property name="maxUploadSize">  
        <value>10485760</value>  
    </property>
</bean>

这样一旦某个Request是一个MultipartRequest，它就会首先被MultipartResolver处理，然后再转发相应的Controller。 

然后在相关上传文件接口中，将HttpServletRequest转型为MultipartHttpServletRequest，就能非常方便地得到文件名和文件内容,然后可以将文件内容转为IO流进行存储或显示查看：

/**
	 * 多文件上传
	 * @param request
	 * @return
	 * @throws IOException
	 */
	@RequestMapping(value = "fileUpload", method = RequestMethod.POST)
	@ResponseBody
	public Object fileUpload(HttpServletRequest request) throws IOException {
		
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
		//获取文件
		List<MultipartFile> files = multipartRequest.getFiles("files");
		
		List<String> list = new ArrayList<String>();
		if (null != files && 0 < files.size()) {
			for(MultipartFile file : files){
				//获取文件名
				String fileName = file.getOriginalFilename();
				//获取文件大小
				long loo = file.getSize();
				String contentType = file.getContentType();
				//获取文件路径
				String filePath = request.getSession().getServletContext().getRealPath("");
				//获取文件内容
				byte[] fileByte = file.getBytes();
				try {
					SambaUtils.uploadFile(file.getBytes(), filePath, fileName);

					String url = this.smbPut(null, filePath + fileName);

					File localFile = new File(filePath + fileName);
					if (localFile.exists()) {
						localFile.delete();
					}
					list.add(url);
				} catch (Exception e) {
					e.printStackTrace();
					throw new RuntimeException();
				}
			}

			
		}
		
	
		return list;

	}


public static void uploadFile(byte[] file, String filePath, String fileName) throws Exception {
		File targetFile = new File(filePath);
		if (!targetFile.exists()) {
			targetFile.mkdirs();
		}
		FileOutputStream out = new FileOutputStream(filePath + fileName);
		out.write(file);
		out.flush();
		out.close();
}

最后页面Code

<!-- 点击小图标 -->
<div class="item-media">
    <a href="#" external>
        <i class="icon icon-camera" id="patient_material">
            <input class="upload" style="opacity: 0" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" type="file" name="files" multiple />
        </i>
    </a>
</div>

<!-- 显示图片样式 -->
<div class="ui-bor-b row ptbd4">
    <div class="ui-bor-b row ptbd4" th:id="patient_materialimg"></div>
</div>

JS实现

$(document).ready(function(){
	//1.选择图片
  	$(".upload").on("change", function() {

        //2.获取当前文件的长度
        var total_file = $(this)[0].files.length; 

        //3.效验文件大小
        for (var i = 0; i < total_file; i++) {  
       	  var fileSize = this.files[i].size;      
       	    var size = fileSize / 1024*1024;
       	    var BigestSize = 1024*1024*10;
       	    if(size> BigestSize){
       	        alert("文件大小不能超过10MB");
       	        return false;
       	    }   
       	  
        } 

        //4.使用formData对象发送文件
        var formData = new FormData(); 
        for (var i = 0; i < total_file; i++) {  
       	 formData.append('files', this.files[i]);
        }

        //5.ajax请求后台
        $.ajax({  
            url: '/filePath/fileUpload',  
            type: 'POST',  
            cache: false,  
            data: formData,  
            processData: false,  
            contentType: false,
            success : function(data) {
           	 for(var i = 0; i < data.length; i++){
             //6.遍历数据 并拼接HTML
                
        });
        //6.删除图片

    });

页面接收图片地址URL：

<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

以上就是用户在页面通过Form方式提交文件上传请求,然后MVC配置MultipartResolver拦截请求,使用MultipartHttpServletRequest将请求文件进行处理的相关步骤。