背景
- 在業務上面使用到了ajax上傳圖片，采用的方式是提供一個公用的api進行圖片上傳，然后返回圖片的在服務器的url，這樣在其他地方使用到時，直接提交圖片的url，而不是圖片資源，避免影響應能和體驗，也方便后期切換（如果后期采用了第三方圖片服務，或者對圖片需要進行處理，只要改造這個接口就好了）。
- 使用Ajax提交表單數據（包含上傳文件）有兩種形式
- using only AJAX
- using the FormData API
- 優缺點
- 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.
大致意思是你可以將數據使用FormData對象編譯成鍵值對形式，然后使用XMLHttpRequest技術向后端發送數據。主要是用來發送form表單數據，也可以發送帶鍵數據。這種形式傳輸的數據和一個enctype屬性為multipart/form-data并且采用submit()方法提交的form表單傳輸的數據格式相同。
Ajax使用FormData提交數據
只是簡單的示范一下文件上傳，表單數據類似，不寫例子了。
Ajax上傳文件-帶form標簽的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();
?>
特點：form表單提交,帶有<form>標簽，enctype="multipart/form-data"不設置也可以。
Ajax不帶form標簽的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>標簽，基本使用場景中使用的是這種。
Ajax不使用FormData提交數據
從參考2來看，上傳文件需要使用使用FileReader對象,并且Ajax不使用FormData提交數據略復雜，幸虧有一些大咖封裝了一下，比如官方提供了一個A little vanilla framework（一點香草？？？？？？這個使用原生寫的，不是封裝，，，），再比如ajaxFileUpload(github地址是參考5，官方有示例，試了一下，妥妥的支持IE6..)。
感受
FormData是HTML5新增的屬性，可能在兼容瀏覽器上面會拋棄一些古典（old）瀏覽器，不過簡單;利用純Ajax提交也還好，因為有很多現成的庫，比如jquery,axios...從A little vanilla framework的示例（參考2）來看，基本是根據form表單的encypt形式，采用相應的方式發送數據。
參考
- 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
