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 => {
});