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接收圖片即可