首先上传文件的框框所在的表单
<form id="jvForm" action="add.do" method="post" enctype="multipart/form-data">
<!-- enctype="multipart/form-data是用于二进制传递数据 用于进行文件上传 -->
上传文件的关键代码
<img width="100" height="100" id="allImgUrl"/>
<input type="hidden" name="imgUrl" id="path" value="${brand.imgUrl}"/>
<input type="file" onchange="uploadPic()" name="imgFile"/><!--type="file"用于打开一个文件选择框-->
js代码
<script type="text/javascript">
//异步上传图片
function uploadPic(){
//定义参数
var options = {
url : "uploadPic.do",
dataType : "json",//服务器返回的数据类型
type : "post",//提交表单的方式
success : function(data){//提交表单成功后执行的回调函数
//回调两个路径 url path
$("#allImgUrl").attr("src",data.url);
$("#path").val(data.path);
/* alert("data.url "+data.url+" data.path "+data.path) */
}
};
//jquery.form使用方式jvForm是表单的id
$("#jvForm").ajaxSubmit(options);
}
</script>
controller层代码
//上传图片@RequestParam(required = false)是不一定要上传
//MultipartFile的变量值是上传文件的那个框框的name属性值
@RequestMapping(value="/brand/uploadPic.do")
public void uploadPic(@RequestParam(required = false) MultipartFile imgFile,HttpServletResponse response) throws UniformInterfaceException, ClientHandlerException, IOException{
List<String> list=new ArrayList<>();
list.add("jpg");
list.add("jpeg");
list.add("bmp");
list.add("gif");
list.add("png");
String filename=imgFile.getOriginalFilename();
String ext=FilenameUtils.getExtension(filename);
if(!list.contains(ext)){
return;
}
//这里开始使用jersey Constants.IMAGE_URL="http://localhost:8080/image-web/"存放图片的服务器目录 另外一台tomcat
Client client=new Client();
String path="upload/"+filename;
String url=Constants.IMAGE_URL+path;
WebResource webResource=client.resource(url);
webResource.put(String.class, imgFile.getBytes());
JSONObject jo=new JSONObject();
jo.put("path", path);
jo.put("url", url);
// ResponseUtils是一个工具类,代码我已经贴在了我另外一个博文里面
ResponseUtils.render(response, "application/json;charset=utf-8", jo.toString());
}
配置文件springmvc-back.xml代码:
<!-- 上传图片 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 最大上传尺寸 B 1M -->
<property name="maxUploadSize" value="11048576"/>
</bean>
<!-- CommonsMultipartResolver这个是一个上传文件的分解器,主要的作用是配置文件上传的一些属性。
1.在这个分解器上配置文件的编码方式 -defaultEncoding
2.配置文件最大值 -maxUploadSize
3.配置缓存 -maxInMemorySize
....等等
注意:在这个bean中的id一定要叫multipartResolver,不然会报错,而且你都不知道为什么,在在文件上传的时候还需要两个jar文件
1.com.springsource.org.apache.commons.fileupload-1.2.0.jar
2.com.springsource.org.apache.commons.io-1``
4.0.jar -->
使用jersey要用的jar包: