Springboot formdata ajax表单数据和图片一起上传
程序员文章站
2022-04-08 16:06:31
...
参考:https://blog.csdn.net/wqh8522/article/details/78971260
https://blog.csdn.net/qq_41669724/article/details/80748952
html文件代码片段
<form id="studentAddForm" method="post" enctype="multipart/form-data" οnsubmit="return false">
学号:
<input id="studentNo" name="studentNo" type="text">
</br>
姓名:
<input id="studentName" name="studentName" type="text">
</br>
性别:
<input id="studentSex" name="studentSex" type="text">
</br>
头像:
<input id="file" name="file" type="file">
</br>
<input type="button" value="添加" οnclick="checkForm()">
</form>
<script>
function checkForm() {
var formData = new FormData($("#studentAddForm")[0]);
$.ajax({
url : "/saveStudentInfo",
type : 'POST',
data : formData,
cache: false,
async: false,
processData : false, //必须false才会避开jQuery对 formdata 的默认处理
contentType : false, //必须false才会自动加上正确的Content-Type
success: function (data) {
console.log("成功");
/*
layer.alert("增加成功", {icon: 6}, function () {
window.parent.location.reload(); //刷新父页面
// 获得frame索引
var index = parent.layer.getFrameIndex(window.name);
//关闭当前frame
parent.layer.close(index);
});
*/
},
error: function (data) {
console.log("失败");
/*
layer.msg(data.message, {time: 2000});
*/
}
});
}
</script>
其中
processData设置为false。因为data值是FormData对象,不需要对数据做处理。
<form>标签添加enctype="multipart/form-data"属性。
cache设置为false,上传文件不需要缓存。
contentType设置为false,不设置contentType值,因为是由<form>表单构造的FormData对象,且已经声明了属性enctype="multipart/form-data",所以这里设置为false。
上传后,服务器端代码需要使用从查询参数名为file获取文件输入流对象,因为<input>中声明的是name="file"
processData: 要求为Boolean类型的参数,默认为true。默认情况下,发送的数据将被转换为对象(从技术角度来讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息,请设置为false。
Controller
@PutMapping("/article/img/upload")
public MarkDVo uploadImg(@RequestParam("editormd-image-file") MultipartFile multipartFile) {
if (multipartFile.isEmpty() || StringUtils.isBlank(multipartFile.getOriginalFilename())) {
throw new BusinessException(ResultEnum.IMG_NOT_EMPTY);
}
String contentType = multipartFile.getContentType();
if (!contentType.contains("")) {
throw new BusinessException(ResultEnum.IMG_FORMAT_ERROR);
}
String root_fileName = multipartFile.getOriginalFilename();
logger.info("上传图片:name={},type={}", root_fileName, contentType);
//处理图片
User currentUser = userService.getCurrentUser();
//获取路径
String return_path = ImageUtil.getFilePath(currentUser);
String filePath = location + return_path;
logger.info("图片保存路径={}", filePath);
String file_name = null;
try {
file_name = ImageUtil.saveImg(multipartFile, filePath);
MarkDVo markDVo = new MarkDVo();
markDVo.setSuccess(0);
if(StringUtils.isNotBlank(file_name)){
markDVo.setSuccess(1);
markDVo.setMessage("上传成功");
markDVo.setUrl(return_path+File.separator+file_name);
markDVo.setCallback(callback);
}
logger.info("返回值:{}",markDVo);
return markDVo;
} catch (IOException e) {
throw new BusinessException(ResultEnum.SAVE_IMG_ERROE);
}
}
/**
* 保存文件,直接以multipartFile形式
* @param multipartFile
* @param path 文件保存绝对路径
* @return 返回文件名
* @throws IOException
*/
public static String saveImg(MultipartFile multipartFile,String path) throws IOException {
File file = new File(path);
if (!file.exists()) {
file.mkdirs();
}
FileInputStream fileInputStream = (FileInputStream) multipartFile.getInputStream();
String fileName = Constants.getUUID() + ".png";
BufferedOutputStream bos = new BufferedOutputStream(new FileOutputStream(path + File.separator + fileName));
byte[] bs = new byte[1024];
int len;
while ((len = fileInputStream.read(bs)) != -1) {
bos.write(bs, 0, len);
}
bos.flush();
bos.close();
return fileName;
}
上一篇: PHP + MySQL的10篇内容推荐
下一篇: 图片上传
推荐阅读
-
多个表单和多个图片一起上传完美解决方案
-
简单前端图片压缩上传----同步表单数据上传(formData、localResizeIMG)
-
基于Ajax的formData图片和数据上传
-
springboot实现表单提交数据和上传文件或图片
-
多个表单和多个图片一起上传完美解决方案
-
laravel文本表单和图片上传表单一起提交,控制器怎么处理?
-
laravel文本表单和图片上传表单一起提交,控制器怎么处理?
-
文本表单和图片一起进行ajax提交,表单是值,图片是对象,发送时有些问题
-
Ajax的formData图片和数据上传_AJAX相关
-
文本表单和图片一起进行ajax提交,表单是值,图片是对象,发送时有些问题