jquery中$.ajax上傳文件,相關配置和示例

參考博客:

  1. jquery中$.ajax上傳文件contentType類型爲multipart/form-data時後臺報錯the request was rejected because no multipart:https://blog.csdn.net/u012235103/article/details/89552453
  2. 淺談contentType = false:https://blog.csdn.net/death05/article/details/80065742
  3. 解決Ajax serialize() 表單進行序列化方式上傳不了文件的問題:https://blog.csdn.net/huxiangen/article/details/84970394
  4. 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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章