參考博客:
- jquery中$.ajax上傳文件contentType類型爲multipart/form-data時後臺報錯the request was rejected because no multipart:https://blog.csdn.net/u012235103/article/details/89552453
- 淺談contentType = false:https://blog.csdn.net/death05/article/details/80065742
- 解決Ajax serialize() 表單進行序列化方式上傳不了文件的問題:https://blog.csdn.net/huxiangen/article/details/84970394
- FORM中使用onSubmit="return false"防止表單自動提交,以及submit和button提交表單的區別:https://www.cnblogs.com/jasonxu19900827/p/9543896.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax上傳文件</title>
<script src="./js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
function saveAjax(){
var formData = new FormData($("#inputForm")[0]);
$.ajax({
url : "",
type : 'POST',
data : formData,
dataType : 'json',
contentType: false, //設置爲 false 是爲了避免 JQuery對其操作,從而失去分界符,而使服務器不能正常解析文件
processData: false, //默認爲true,默認情況下,發送的數據將被轉換爲對象,設爲false不希望進行轉換
success : function(data, status) {
console.log(data);
},
error:function(){
}
})
}
</script>
</head>
<body>
<form id="inputForm" action="" onsubmit="return false;" method="post" enctype="multipart/form-data">
<input type="text" name="id" id="id" value="" />
<input type="text" name="text" id="text" value="" />
<input type="file" multiple="multiple" id="files" name="files">
<input type="submit" onclick="saveAjax();" value="提交">
</form>
</body>
</html>