【uploadFileUtils 20180816】记录一下用图片覆盖上传按钮的过程。前端太繁杂总是会忘。
先设置一个隐藏的表单域
修饰的点击图片，在图片上添加单击事件
文章图片
方法触发隐藏的input单击事件
function showFile() {
$("#xxxb").click();
}添加关键上传方法,ajax返回imgPath用于回显，fileName是存储时的文件名
$("#xxxb").change(function () {
var form = document.getElementById('saveForm'),
formData = https://www.it610.com/article/new FormData(form);
$.ajax({
url:"url",
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false,
success: function (result) {
var temp = $.parseJSON( result);
$("#imgInput").val(temp.fileName);
$("#oopx").attr("src", temp.imgPath);
}
})
$('#xxxb').val('');
});
后端
controller 处理请求
@ResponseBody
@RequestMapping(value = "https://www.it610.com/uploadImage",method = RequestMethod.POST)
public String uploadRefundImage(@RequestParam("fileupload") MultipartFile file, HttpServletRequest request) throws Exception {
JSONObject jsonObject=new JSONObject();
ZimgUploadUtil zimgUploadUtil=new ZimgUploadUtil();
if (null != file) {
String img = zimgUploadUtil.uploadImgToZimg(file);
jsonObject.put("fileName",img);
jsonObject.put("imgPath", img);
}
return jsonObject.toJSONString();
}
