jQuery-Ajax异步上传文件

由于需要获取php上传后的回调信息,所以研究了下异步上传文件

实现方式:用FormData序列化存储文件,还需指定两个属性为false

  • contentType
  • processData

属性解释:

  • 使用FormData是为了序列化文件
  • 设置contentType:false是为了不让jQuery处理contentType
  • 设置processData:false是为了不让jQuery将数据处理成字符串

样例参考:

html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Upload</title>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	<script type="text/javascript">
		$(function () {
     
     
			$("button#upload").click(function(event) {
     
     
				var formdata = new FormData();
				formdata.append("file",$('input#test')[0].files[0]);
				$.ajax({
     
     
					url: '自己的上传文件接口',
					type: 'POST',
					contentType: false,
					processData: false,
					data: formdata
				})
				.done(function(data) {
     
     
					console.log(data);
				});	
			});
		});
	</script>
</head>
<body>
	<input id="test" type="file" />
	<button id="upload">点击上传</button>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/L333333333/article/details/104847584