一、jq
XMLHttpRequest Level2 添加了一个新的接口——FormData 。【 主要用于发送表单数据,但也可以独立使用于传输键控数据。与普通的Ajax相比,它能异步上传二进制文件 】
利用FormData对象,可通过js用一些键值对来模拟一系列表单控件,还可以使用XMLHttpRequest的send()方法异步提交表单。
首先,在之前的“前后台交互之传参方式”中讲了传统的form表单提交的方式(表单序列化),它只适用于传递一般参数,上传文件的文件流是无法被序列化并传递的。所以,使用FormData,可以轻松的和ajax结合进行文件上传。
html
<form action="" method="post" id="uploadF">
<div>上传文件:</div><input name="file" type="file" id="uploadFile" value="" />
</form>
js
$('#uploadFile').change(function() {
var form = document.getElementById("uploadF");
var formData = new FormData(form);
formData.append('testName', '我是传送文件标识')
console.log(formData.get('file'));
$('#loading').show();
$.ajax({
type: "post",
url: domain + ads.uploadads,
data: formData,
processData: false,//告诉jq不要处理发送的数据
contentType: false,//告诉jq不要设置content-Type请求头
success: function(res) {
console.log(res)
}
});
})
相当于进行了表单提交,后台开发人员接收到数据操作即可。
二、fetch(无需设置content-type!!)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>fetch上传文件</title>
</head>
<body>
<input type="file" id="files" onchange="upload(event)"/>
<script type="text/javascript">
function upload(event) {
const formData = new FormData();
formData.append('file', event.target.files[0]);
fetch('/upload', {
method: 'post',
body: formData,
}).then(response => response.json())
.then((data) => {
console.log(data);
});
}
</script>
</body>
</html>