ajax提交form表单
程序员文章站
2022-07-12 18:16:05
...
ajax和form表单有很多有趣的互动,ajax提交form表单就是其中一种,这种方法主要是用来提交带图数据的。
html页面,我把图片单独放到form表单内,其他数据放到form外即可
<form method="post" enctype="multipart/form-data" id="testForm">
<input type="file" name="problemImage" id="file" >
</form>
js
var formData = new FormData(document.getElementById("testForm"));//表单id
var problemTitle=$("#problemTitle").val();
var problemDescribe = $("#problemDescribe").val();
if ($(".is-other").css("display") == "block") {
problemType = $(".is-other").val();
}
formData.append("problemTitle", problemTitle);
formData.append("problemDescribe", problemDescribe);
formData.append("userId", userId);
$.ajax({
url: '',
type: 'post',
data: formData,
async: false,//同步加载
contentType: false,//防止jq对formdata操作,默认为ture
processData: false,//防止序列化操作
success: function (result) {
}
});
}
后台用MultipartFile file接收图片即可
推荐阅读
-
vue+element创建动态的form表单及动态生成表格的行和列
-
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
-
仿ElementUI实现一个Form表单的实现代码
-
Servlet获取AJAX POST请求中参数以form data和request payload形式传输的方法
-
JSP避免Form重复提交的三种方案
-
Python实现模拟登录及表单提交的方法
-
Spring Boot与Kotlin处理Web表单提交的方法
-
分享一个H5原生form表单的checkbox特效代码
-
基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片)
-
javascript 清空form表单中某种元素的值