Ajax做文件上传就会有兼容性的问题。只有一些高版本的浏览器可以实现文件上传的功能。Ie6 ie7 低版本浏览器不能实现。因为ajax文件上传用到Formdata,它是h5新增的，有兼容问题，低版本浏览器不支持。
数据往formdata中加：
调用formdata的append方法，用原生dom对象的file的第0个获取到上传的文件。发aiax请求，用post请求方式，添加属性。
原生ajax上传代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>data</p><input id='data' type="file" name="data" />
<p>type</p><input id='input1' type="text" value='image/jpg' name="type" />
<input type="button" value="添加文件" id="btn" />
</body>
</html>
<script>
btn.onclick = function () {
// 前后端交互
var xhr = new XMLHttpRequest();
xhr.open("POST", "请求接口", true);// 把数据传过去，true：异步 false：同步
var formData = new FormData();
formData.append("type", input1.value);
formData.append("data", data.files[0]);
xhr.send(formData);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var flag = xhr.responseText;//把响应拿回来
console.log(flag);
}
}
}
</script>
Jquery ajax上传代码：
注意：在ajax发送请求时要加上以下三个属性：不加会报错
Cache:false
processData:false
contentType:false
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<p>data</p><input id='data' type="file" name="data" />
<p>type</p><input id='input1' type="text" value='image/jpg' name="type" />
<input type="button" value="添加文件" id="btn" onclick="test();" />
</body>
</html>
<script>
function test() {
var formData = new FormData();
formData.append("type", input1.value);
formData.append("data", data.files[0]);
$.ajax({
url: "请求接口",
method: "POST",
cache: false, // 文件不设置缓存
data: formData,
processData: false, // 数据不被转换为字符串
contentType: false, // 上传文件时使用，避免 JQuery 对其操作
success: function (result) {
console.log(result);
}
})
}
</script>
Vue axios上传代码：
let formData = new FormData();
formData.append('type', input1.value);
formData.append('data', data.files[0]);
axios({
method: 'post',
url: "请求接口",
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(res => {
})
.catch(err => {
});