springMVC--文件上传

文件上传

1、导入jar

跨服务器上传文件jar。Io，fileupload

 

 

需求

 

上传图片，图片里面回显。Ajax。页面不刷新图片回显。

Ajax能不能提交表单？

<img src=”图片路径”/>

//把文件关联表单

//触发ajax事件

<input type=file οnchange=“ajax事件”/>

<input type=”hidden” value=”图片相对路径”/>

 

模拟2台服务器：

创建一个项目，图片服务器项目，图片服务器和上传图片的项目端口不一致。

2、开启文件上传

Springmvc配置文件配置支持文件上传类:

<!-- 文件上传解析器 -->
	<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
	<property name="maxUploadSize" value="10240000"></property>
	</bean>

3、页面ajax

发送请求，上传图片：图片被关联表单。提交表单：jquery.form.js

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.form.js"></script>
<script type="text/javascript">
function submitImgSize1Upload(){
	
	
	var option={
			type:'POST',
			url:'${pageContext.request.contextPath }/upload/uploadPic.do',
			dataType:'text',
			data:{
				fileName : 'imgSize1File'
			},
			success:function(data){
				
				//把json格式的字符串转换成json对象
				var jsonObj = $.parseJSON(data);
				
				//返回服务器图片路径，把图片路径设置给img标签
				$("#imgSize1ImgSrc").attr("src",jsonObj.fullPath);
				//数据库保存相对路径
				$("#imgSize1").val(jsonObj.relativePath);
			}
			
		};
	
	$("#itemForm").ajaxSubmit(option);
	
}
</script>

4、uploadController

使用jersy服务器进行跨服务器上传：

package cn.hcx.controller;

import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartFile;

import cn.hcx.utils.Commons;

import com.sun.jersey.api.client.Client;
import com.sun.jersey.api.client.WebResource;

@Controller
@RequestMapping("/upload")
public class UploadController {

	@RequestMapping("uploadPic")
	public void uploadPic(HttpServletRequest request,String fileName,PrintWriter out){
		//把Request强转成多部件请求对象
		MultipartHttpServletRequest mh = (MultipartHttpServletRequest) request;
		//根据文件名称获取文件对象
		CommonsMultipartFile cm = (CommonsMultipartFile) mh.getFile(fileName);
		//获取文件上传流
		byte[] fbytes = cm.getBytes();
		
		//文件名称在服务器有可能重复？
		String newFileName="";
		SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS");
		newFileName = sdf.format(new Date());
		
		Random r = new Random();
		
		for(int i =0 ;i<3;i++){
			newFileName=newFileName+r.nextInt(10);
		}
		
		//获取文件扩展名
		String originalFilename = cm.getOriginalFilename();
		String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
		
		//创建jesy服务器，进行跨服务器上传
		Client client = Client.create();
		//把文件关联到远程服务器
		WebResource resource = client.resource(Commons.PIC_HOST+"/upload/"+newFileName+suffix);
		//上传
		resource.put(String.class, fbytes);
		
		
		//ajax回调函数需要会写写什么东西？
		//图片需要回显：需要图片完整路径
		//数据库保存图片的相对路径.
		String fullPath = Commons.PIC_HOST+"/upload/"+newFileName+suffix;
		
		String relativePath="/upload/"+newFileName+suffix;
		//{"":"","":""}
		String result="{\"fullPath\":\""+fullPath+"\",\"relativePath\":\""+relativePath+"\"}";
		
		out.print(result);
				
		
	}
	
}

 

 

5、修改图片服务器文件上传权限

 

 

6、图片上传位置