背景
- 在業(yè)務(wù)上面使用到了ajax上傳圖片，采用的方式是提供一個(gè)公用的api進(jìn)行圖片上傳，然后返回圖片的在服務(wù)器的url，這樣在其他地方使用到時(shí)，直接提交圖片的url，而不是圖片資源，避免影響應(yīng)能和體驗(yàn)，也方便后期切換（如果后期采用了第三方圖片服務(wù)，或者對圖片需要進(jìn)行處理，只要改造這個(gè)接口就好了）。
- 使用Ajax提交表單數(shù)據(jù)（包含上傳文件）有兩種形式
- using only AJAX
- using the FormData API
- 優(yōu)缺點(diǎn)
- Using the FormData API is the simplest and fastest, but has the disadvantage that data collected can not be stringified.
- Using only AJAX is more complex, but typically more flexible and powerful.
FormData簡介
The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest. It is primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to multipart/form-data.
大致意思是你可以將數(shù)據(jù)使用FormData對象編譯成鍵值對形式，然后使用XMLHttpRequest技術(shù)向后端發(fā)送數(shù)據(jù)。主要是用來發(fā)送form表單數(shù)據(jù)，也可以發(fā)送帶鍵數(shù)據(jù)。這種形式傳輸?shù)臄?shù)據(jù)和一個(gè)enctype屬性為multipart/form-data并且采用submit()方法提交的form表單傳輸?shù)臄?shù)據(jù)格式相同。
Ajax使用FormData提交數(shù)據(jù)
只是簡單的示范一下文件上傳，表單數(shù)據(jù)類似，不寫例子了。
Ajax上傳文件-帶form標(biāo)簽的FormData提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試</title>
</head>
<body>
<form id="upload" method="post">
<input id="file" type="file" name="file"/>
<input id="img" type="hidden"/>
<input type="submit" value="上傳圖片">
</form>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var BASE_URL = '../'
$(document).ready(function(){
$('#file').on('change', function() {
var formData = new FormData($('#upload')[0])
$.ajax({
url: BASE_URL + 'api/upload',
type: 'post',
cache: false,
data: formData,
processData: false,
contentType: false,
success: function(res) {
console.log(res)
}
})
})
})
</script>
</body>
</html>
<?php
print_r($_FILE);exit();
?>
特點(diǎn)：form表單提交,帶有<form>標(biāo)簽，enctype="multipart/form-data"不設(shè)置也可以。
Ajax不帶form標(biāo)簽的FormData提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試</title>
</head>
<body>
<input id="file" type="file" name="file"/>
<input id="img" type="hidden"/>
<input type="submit" value="上傳圖片">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var BASE_URL = '../'
$(document).ready(function(){
$('#file').on('change', function() {
console.log(this.files)
var formData = new FormData()
formData.append("file", this.files[0]);
$.ajax({
url: BASE_URL + 'api/upload',
type: 'post',
cache: false,
data: formData,
processData: false,
contentType: false,
success: function(res) {
console.log(res)
}
})
})
})
</script>
</body>
</html>
<?php
print_r($_FILE);exit();
?>
沒有<form>標(biāo)簽，基本使用場景中使用的是這種。
Ajax不使用FormData提交數(shù)據(jù)
從參考2來看，上傳文件需要使用使用FileReader對象,并且Ajax不使用FormData提交數(shù)據(jù)略復(fù)雜，幸虧有一些大咖封裝了一下，比如官方提供了一個(gè)A little vanilla framework（一點(diǎn)香草？？？？？？這個(gè)使用原生寫的，不是封裝，，，），再比如ajaxFileUpload(github地址是參考5，官方有示例，試了一下，妥妥的支持IE6..)。
感受
FormData是HTML5新增的屬性，可能在兼容瀏覽器上面會(huì)拋棄一些古典（old）瀏覽器，不過簡單;利用純Ajax提交也還好，因?yàn)橛泻芏喱F(xiàn)成的庫，比如jquery,axios...從A little vanilla framework的示例（參考2）來看，基本是根據(jù)form表單的encypt形式，采用相應(yīng)的方式發(fā)送數(shù)據(jù)。
參考
- https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
- https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files
- https://developer.mozilla.org/en-US/docs/Web/API/FileReader
- https://www.cnblogs.com/zhuxiaojie/p/4783939.html
- https://github.com/davgothic/AjaxFileUpload
