考慮一個常見的用戶上傳頭像的場景：
點擊按鈕，彈出文件選擇框 選中圖片并確認后直接上傳圖片實現這個功能，需要使用<input>來添加文件，并實現上傳功能。傳統的上傳文件是將<input>放到<form>中提交，但在這個場景中并不存在form表單，只有一個input而已。那么應該如何處理呢？
答案是可以使用FormData來實現文件的提交。
先看一下MDN對FormData的介紹：
XMLHttpRequest Level 2添加了一個新的接口FormData.利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()方法來異步的提交這個”表單”.比起普通的ajax,使用FormData的最大優點就是我們可以異步上傳一個二進制文件.
這樣一來，解決問題的思路就出來了：
每次選中文件并確認后，<input>會觸發change事件，在onchange事件處理函數中處理即可。 創建一個FormData對象，并將選中的文件追加進去。 使用Ajax發送這個FormData對象。下面用一個Demo展示具體的代碼實現用FormData將文件發送到一個php：
<html><head> <title>Upload</title> <meta charset="utf-8"></head><body> <input id="file-input" type="file"> <script> var input = document.getElementById('file-input'); input.onchange = function () { var data = new FormData(); data.append('file', input.files[0]); var request = new XMLHttpRequest(); request.open('POST', './upload.php'); request.send(data); }; </script></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
圖片精選
