1.客户端(ajax)
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>
客户端采用ajaxSubmit的方式上传图片文件。
2. 服务器端
在springmvc.xml中配置
<!-- 文件上传解析器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="10240000"></property>
</bean>
@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);
}
}
2.1 上传过程中需注意两次类型强转
MultipartHttpServletRequest CommonsMultipartFile
代码片段如下:
//把Request强转成多部件请求对象
MultipartHttpServletRequest mh = (MultipartHttpServletRequest) request;
//根据文件名称获取文件对象
CommonsMultipartFile cm = (CommonsMultipartFile) mh.getFile(fileName);
//获取文件上传流
byte[] fbytes = cm.getBytes();
2.2 服务器端采用jersey框架实现跨服务器上传
代码片段如下:
//创建jesy服务器,进行跨服务器上传
Client client = Client.create();
//把文件关联到远程服务器
WebResource resource = client.resource(Commons.PIC_HOST+"/upload/"+newFileName+suffix);
//上传
resource.put(String.class, fbytes);