@ResponseBody @PostMapping(value = "/upload", headers = "content-type=multipart/*" ) public String uploadFile(@RequestParam(value = "file",required = false) MultipartFile file){ if (file.isEmpty()) { System.out.println("文件为空空"); } String fileName = file.getOriginalFilename(); // 文件名 String suffixName = fileName.substring(fileName.lastIndexOf(".")); // 后缀名 String filePath = "H://img//"; // 上传后的路径 fileName = UUID.randomUUID() + suffixName; // 新文件名 File dest = new File(filePath + fileName); if (!dest.getParentFile().exists()) { dest.getParentFile().mkdirs(); } try { file.transferTo(dest); } catch (IOException e) { e.printStackTrace(); } String filename = "/img/" + fileName; return filename;// 我这里是直接返回的名字 }
以上是upload 上传的方法我是将上传的路径直接返回到了页面去回显。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-2.1.0.js"></script>
</head>
<body>
照片:<input type="file" name="file" id="file" />
<input type="button" id="upload" value="上传" /><br id="br"/>
</body>
<script type="text/javascript">
$("#upload").click(function () {
var formData = new FormData();
var data=$(this).prev()[0].files[0];
formData.append("file",data);
alert(formData.toString())
$.ajax({
type: 'post',
url: "/file/upload", //上传文件的请求路径必须是绝对路劲
data: formData,
cache: false,
processData: false,
contentType: false,
}).success(function (data) {
$("#br").after("<img style=' 200px;height: 200px' src='"+data+"' name='fileImg'><br>/");
}).error(function () {
alert("上传失败");
});
});
}
)
</script>
</html>
页面 ：这是使用的ajax上传图片