jQuery-Ajax异步上传文件

最新推荐文章于 2022-01-11 20:06:17 发布

blankliu404

最新推荐文章于 2022-01-11 20:06:17 发布

阅读量283

点赞数

文章标签： jquery ajax 上传文件

本文链接：https://blog.csdn.net/L333333333/article/details/104847584

版权

由于需要获取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>