springboot thymleaf ajax提交表单同时文件上传及回显

上传图片前展示图片

上传图片前的图显

<form  id="form" >
		input id="categoryName" name="categoryName" class="form-control" type="text">
		
		<input id="newsImages" name="newsImages" class="form-control"  onChange="changeImage(this)"
				type="file">
		<button type="submit" class="btn btn-primary">提交</button>		
		<img id="image" src="" >	
</form>

function changeImage(obj) {
	//获取点击的文本框
	var file = document.getElementById(
		"newsImages");
	var imgUrl = window.URL.createObjectURL(
		file.files[
			0]);
	var img = document.getElementById(
		'image');
	img.setAttribute( 'width', 258);	
	img.setAttribute( 'height', 198);	
	img.setAttribute( 'src', imgUrl); // 修改img标签src属性值

}						

新增对象及图片

$().ready(function() {
	validateRule();
});

$.validator.setDefaults({
	submitHandler : function() {
		save();
	}
});

function save() {
	var categoryName = $("#categoryName").val().trim();
	     
	var formData = new FormData();
	formData.append("newsContent", newsContent);
	formData.append("newsImages", $("#newsImages")[0].files[0]);
	$.ajax({
		cache : true,
		processData : false,   //上传必须要写
		contentType : false,	//上传必须要写
		type : "POST",	//上传必须post
		url : "/save",
		data : formData, // 你的formid
		async : false,
		error : function(request) {
			parent.layer.alert("Connection error");
		},
		success : function(data) {
		}
	});

}

后台接收值

/**
	 * 保存
	 */
	@ResponseBody
	@PostMapping("/save")
	public R save(String categoryName, MultipartFile newsImages) {
		NewsSubject newsSubject = new NewsSubject();
		newsSubject.setCategoryName(categoryName);
		if (newsImages != null) {
			String fileName = newsImages.getOriginalFilename();
			fileName = FileUtil.renameToUUID(fileName);
			try {
			//图片保存的本地路径 
				FileUtil.uploadFile(newsImages.getBytes(), "C:/项目/images/", fileName);
				//数据库只保存图片名字
				newsSubject.setNewsImages(fileName);
			} catch (Exception e) {
				return R.error();
			}
		}
		newsSubject.setReleaseTime(new Date());
		if (newsSubjectService.save(newsSubject) > 0) {
			return R.ok();
		}
		return R.error();
	}

对本地静态资源配置

shiro中首先配置 /images/** 不拦截

在springboot中配置接口 WebMvcConfigurer 自定义资源映射addResourceHandlers

@Component
class WebConfigurer extends WebMvcConfigurerAdapter {
	@Autowired
	DrjyConfig drjyConfig;
	@Override
	public void addResourceHandlers(ResourceHandlerRegistry registry) {
		registry.addResourceHandler("/images/**").addResourceLocations("file:///C:/项目/images/");
	}

}

保存图片成功