Java的Springboot框架结合AJAX实现form表单图片上传-详解

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！分享一波用法！不会的给我私信或者回复留言！
觉得有帮助的可以关注一波！经常分享编程踩坑经验！