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>
发布了115 篇原创文章 · 获赞 58 · 访问量 43万+

猜你喜欢

转载自blog.csdn.net/menghuanzhiming/article/details/105407400
今日推荐