springMVC--文件上传

文件上传

1、导入jar

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

 

需求

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

Ajax能不能提交表单？

 

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

//把文件关联表单

//触发ajax事件

<input type=file onchange=“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.itcast.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.itcast.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、图片上传位置