Java的Springboot框架结合AJAX实现form表单图片上传-详解
页面
<form>
<div class="row" style="margin-top: 3px;">
<div class="col-md-2" style="margin-top: 5px;" ><span>场地图片:</span></div>
<div class="col-md-9 " style="padding-left:0px">
<input type="file" id="file" name="file" class="form-control" required>
<input type="text" hidden id="type_image" name="type_image" value=''>
</div>
</div>
<div class="row"style="margin-top: 3px;">
<div class="col-md-2" style="margin-top: 5px;"><span>联系人:</span></div>
<div class="col-md-9 " style="padding-left:0px">
<input type="text" id="type_linkman" class="form-control" readonly="readonly" required autofocus value=''>
</div>
</div>
</form>
JavaScript
/*图片AJAX上传*/
$("body").on("change","#file",function(e){
var formData = new FormData($("#typeForm")[0]);
$.ajax({
url: "/admin/upload",
type: "post",
data: formData,
contentType:"application/x-www-form-urlencoded; charset=utf-8",
async: false,
cache: false,
contentType: false,
processData: false,
success: function(data){
console.log(data)
$("#type_image").attr("value",data);
}
});
});
Controller处理
@RestController()
@RequestMapping("/admin")
public class AdminController {
@Value("${filePath}")
private String filePath = "C:\upload";
/**
* 上传图片
*/
@PostMapping("/upload") // 等价于 @RequestMapping(value = "/upload", method = RequestMethod.POST)
public String uplaod(HttpServletRequest req, @RequestParam("file") MultipartFile file) {//1. 接受上传的文件 @RequestParam("file") MultipartFile file
try {
//2.根据时间戳创建新的文件名,这样即便是第二次上传相同名称的文件,也不会把第一次的文件覆盖了
//获取文件的后缀名 .jpg
int lastIndexOf = file.getOriginalFilename().lastIndexOf(".");
String suffix = file.getOriginalFilename().substring(lastIndexOf);
String fileName = System.currentTimeMillis() + suffix;
//3.通过req.getServletContext().getRealPath("") 获取当前项目的真实路径,然后拼接前面的文件
//String destFileName = req.getServletContext().getRealPath("") + "uploaded" + File.separator + fileName;
String destFileName = filePath+File.separator+fileName;
//4.第一次运行的时候,这个文件所在的目录往往是不存在的,这里需要创建一下目录(创建到了webapp下uploaded文件夹下)
File destFile = new File(destFileName);
destFile.getParentFile().mkdirs();
//5.把浏览器上传的文件复制到希望的位置
file.transferTo(destFile);
//6.把文件名放在model里,以便后续显示用
return "/"+fileName;
} catch (FileNotFoundException e) {
e.printStackTrace();
return "上传失败," + e.getMessage();
} catch (IOException e) {
e.printStackTrace();
return "上传失败," + e.getMessage();
}
}
}
OK!分享一波用法!不会的给我私信或者回复留言!
觉得有帮助的可以关注一波!经常分享编程踩坑经验!