webApp
下创建 upload
文件夹下
## 添加依赖
commons-io commons-fileupload
<!-- 添加文件上传的依赖 --> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.4</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency>
id
的名称一定是 multipartResolver
,不能任意指定
<!-- 上传组件的解析器 -->
<beanid="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 上传文件大小 -->
<propertyname="maxUploadSize"value="10000000"></property>
<!-- 请求的编码格式,必须和jSP的pageEncoding属性一致,以便正确读取表单的内容,默认为ISO-8859-1 -->
<propertyname="defaultEncoding"value="utf-8"></property>
</bean>
POST enctype="multipart/form-data"
<formaction="${pageContext.request.contextPath }/upload/upload.do"method="POST"enctype="multipart/form-data">
file: <inputtype="file"name="file"value="上传">
<br>
<inputtype="submit"value="上传">
</form>
MultipartFile file
@RequestMapping("/upload.do")
public String uplaod(MultipartFile file)throws IllegalStateException, IOException{
String fileName=file.getOriginalFilename(); //获取文件名
Long fileSize=file.getSize(); //获取文件大小
//上传 参数是文件上传后储存的路径,最终的文件上传后的文件路径为/home/chenjiabing/Documents/Blog/fileName
file.transferTo(new File("/home/chenjiabing/Documents/Blog",fileName));
//重定向到首页
return "redirect:../main/showIndex.do";
}
onchange
事件,只要input的改变了,那么就上传文件 <inputtype="file"name="file"value=""id="iconPic"onchange="getImageFun()">
@RequestParam("file")
,否则有时候会出现不对应的情况 /upload/文件名
,那么我们使用 http://localhost:8080/TeduStore/upload/文件名
就能访问到
@RequestMapping("/getImage.do")
@ResponseBody
public ResponseResult<Void> getImage(@RequestParam("file")MultipartFile file,HttpSession session)throws IllegalStateException, IOException{
ResponseResult<Void> result=new ResponseResult<Void>(); //创建结果集对象
String projectPath=session.getServletContext().getRealPath("/"); //获取项目的根路径
//如果文件不为空
if (!file.isEmpty()) {
String fileName=file.getOriginalFilename(); //文件的真实名称
//使用UUID算法,获取随机的文件名
UUID uuid=UUID.randomUUID();
//随机生成的文件名
fileName=uuid.toString()+fileName.substring(fileName.lastIndexOf("."));
User user=(User) session.getAttribute("user");
//数据库保存的就是 /upload/+文件名即可,不需要保存projectPath+"/upload/"+fileName
userservice.UpdateImage(user.getId(), "/upload/"+fileName);
//上传文件 上传成功后的路径: 项目的根路径/upload/fileName
file.transferTo(new File(projectPath,"/upload/"+fileName));
result.setState(1);
result.setMessage("上传成功");
}
return result;
}
contentType:false
, processData:false
FormData
对象保存数据,当然处理文件类型(File类型)的,我们也可以存储键值对,比如 formdata.append("username","jack")
,最后一起提交即可 //上传文件的方法
functiongetImageFun(){
var file=document.getElementById("iconPic").files[0]; //获取当前的file
// 创建FormData对象
var formData=new FormData();
formData.append("file",file); //将文件放入formData中
$.ajax({
"url":"${pageContext.request.contextPath}/user/getImage.do",
"data":formData,
"type":"post",
"dataType":"json", //返回数据类型
"contentType":false, //不设置上传文件类型 ,因为上传的文件有多种类型的
"processData":false, //不处理数据
"success":function(obj){
alert(obj.message);
var url=window.URL.createObjectURL(file); //获取上传的的本地路径
$("#icon").attr("src",url); //将上面的头像显示为当前选择的图片
}
})
}
http://localhost:8080/TeduStore/upload.do/download.do?fileName=1.jpg
/**
* 文件下载
* @param fileName 文件名
* @param request
* @throws IOException
*/
@RequestMapping("/download.do")
public ResponseEntity<byte[]> download(@RequestParam("fileName")String fileName,HttpServletRequest request) throws IOException{
//获取下载文件的路径,在文件中的真实路径
String path=request.getServletContext().getRealPath("/upload/");
//下载文件的全路径
File file=new File(path+File.separator+fileName);
HttpHeaders headers = new HttpHeaders();
//下载显示的文件名,解决中文名称乱码问题
String downloadFielName = new String(fileName.getBytes("UTF-8"),"iso-8859-1");
//通知浏览器以attachment(下载方式)打开图片
headers.setContentDispositionFormData("attachment", downloadFielName);
//application/octet-stream : 二进制流数据(最常见的文件下载)。
headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
return new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(file),
headers, HttpStatus.CREATED);
}