前言：在XMLHttpRequest Level 2添加了一個新的接口FormData。利用FormData對象，我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()方法來異步的提交這個"表單"。比起普通的ajax,使用FormData的最大優(yōu)點就是我們可以異步上傳一個二進制文件。
下面的代碼將創(chuàng)建一個空的FormData對象：
varformData=newFormData()
你可以使用FormData.append來添加鍵/值對到表單里面
formData.append('username','Chris');
在工作中有一個小的功能就是圖片上傳，通過<input required type="file"accept="image/*"multiple>模擬一個圖片上傳控件。如下圖：
剛開始做的時候，需求是上傳一張圖片，這樣好做，通過對該input綁定change事件，然后獲取該input的files的值（不是通過該input的value獲取）。然后通過ajax將該oFormdata上傳到接口就可以了，如下圖：
但是這樣會出現(xiàn)一個問題，每次只能上傳一張圖片，重新添加照片的時候會覆蓋前面所選的圖片。
我們可以給input增加一個multiple屬性，這樣可以選擇多張圖片，然后通過length屬性獲取files的長度，循環(huán)給formdata對象添加，然后通過ajax進行上傳。
如果用戶想更換或者刪除所選中的圖片呢？那我們可以將選中的files列表推進一個數(shù)組中，這樣我們就可以很好的進行控制。
之前的圖片預(yù)覽都是在上傳阿里云成功后會返回一個圖片的url地址，這樣在成功的回調(diào)后我可以給該位置的背景圖片的url賦值，但是現(xiàn)在要求的是先預(yù)覽圖片，在用戶選擇后再進行提交。
所以引出了window.URL.createObjectURL，URL.createObjectURL()方法會根據(jù)傳入的參數(shù)創(chuàng)建一個指向該參數(shù)對象的URL. 這個URL的生命僅存在于它被創(chuàng)建的這個文檔里. 新的對象URL指向執(zhí)行的File對象或者是Blob對象.
語法: objectURL = URL.createObjectURL(blob || file);
參數(shù):
File對象或者Blob對象
這里大概說下File對象和Blob對象:
File對象,就是一個文件,比如我用input type="file"標簽來上傳文件,那么里面的每個文件都是一個File對象.
Blob對象,就是二進制數(shù)據(jù),比如通過new Blob()創(chuàng)建的對象就是Blob對象.又比如,在XMLHttpRequest里,如果指定responseType為blob,那么得到的返回值也是一個blob對象.
注意點:
每次調(diào)用createObjectURL的時候,一個新的URL對象就被創(chuàng)建了.即使你已經(jīng)為同一個文件創(chuàng)建過一個URL. 如果你不再需要這個對象,要釋放它,需要使用URL.revokeObjectURL()方法. 當(dāng)頁面被關(guān)閉,瀏覽器會自動釋放它,但是為了最佳性能和內(nèi)存使用,當(dāng)確保不再用得到它的時候,就應(yīng)該釋放它.
所以可以對每個files生成一個本地的url，然后給每個圖片的占位背景設(shè)置該url，這樣就可以實現(xiàn)本地預(yù)覽了，如果要對上傳的files進行增刪改查，那么可以對存儲該所有files的數(shù)組進行管理。
注：該方法不支持低版本瀏覽器。
