JavaScript資料之FormData對象

◆ FormData對象的使用：

1、準備HTML表單：

 <form id="form">
     <input type="text" name="username" />
     <input type="password" name="password" />
     <input type="button"/>
</form>

2、將 HTML 表單轉化爲 formData 對象：

var form = document.getElementById('form'); 
var formData = new FormData(form);

3、Ajax提交表單對象：

xhr.send(formData);

示例：

<!-- 創建普通的html表單 -->
<form id="form">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="button" id="btn" value="提交">
</form>
<script type="text/javascript">
    // 獲取按鈕
    var btn = document.getElementById('btn');
    // 獲取表單
    var form = document.getElementById('form');
    // 爲按鈕添加點擊事件
    btn.onclick = function () {
        // 將普通的html表單轉換爲表單對象
        var formData = new FormData(form);
        // 創建ajax對象
        var xhr = new XMLHttpRequest();
        // 對ajax對象進行配置
        xhr.open('post', 'http://localhost:3000/formData');
        // 發送ajax請求
        xhr.send(formData);
        // 監聽xhr對象下面的onload事件
        xhr.onload = function () {
            // 對象http狀態碼進行判斷
            if (xhr.status == 200) {
                console.log(xhr.responseText);
            }
        }
    }
</script>

◆ 注意事項：

1. Formdata 對象不能用於 get 請求，因爲對象需要被傳遞到 send 方法中，而 get 請求方式的請求參數只能放在請求地址的後面。
2. 服務器端 bodyParser 模塊不能解析 formData 對象表單數據，我們需要使用 formidable 模塊進行解析。

◆ FormData對象的實例方法：

1、獲取表單對象中屬性的值

formData.get('key');

2、設置表單對象中屬性的值

formData.set('key', 'value');

3、刪除表單對象中屬性的值

formData.delete('key');

4、向表單對象中追加屬性值

formData.append('key', 'value');

注：set 方法與 append 方法的區別是，在屬性名已存在的情況下，set 會覆蓋已有鍵名的值，append會保留兩個值

◆ FormData二進制文件上傳

<input type="file" id="file"/>

 var file = document.getElementById('file')
// 當用戶選擇文件的時候
 file.onchange = function () {
     // 創建空表單對象
     var formData = new FormData();
     // 將用戶選擇的二進制文件追加到表單對象中
     formData.append('attrName', this.files[0]);
     // 配置ajax對象，請求方式必須爲post
     xhr.open('post', 'www.example.com');
     xhr.send(formData);
 }

◆ FormData文件上傳進度展示

 // 當用戶選擇文件的時候
 file.onchange = function () {
     // 文件上傳過程中持續觸發onprogress事件
     xhr.upload.onprogress = function (ev) {
         // 當前上傳文件大小/文件總大小 再將結果轉換爲百分數
         // 將結果賦值給進度條的寬度屬性 
         bar.style.width = (ev.loaded / ev.total) * 100 + '%';
     }
 }

◆ FormData文件上傳圖片即時預覽

在我們將圖片上傳到服務器端以後，服務器端通常都會將圖片地址做爲響應數據傳遞到客戶端，客戶端可以從響應數據中獲取圖片地址，然後將圖片再顯示在頁面中。

 xhr.onload = function () {
     var result = JSON.parse(xhr.responseText);
     var img = document.createElement('img');
     img.src = result.src;
     img.onload = function () {
         document.body.appendChild(this);
     }
 }

node端處理：

// 實現文件上傳的路由
app.post('/upload', (req, res) => {
	// 創建formidable表單解析對象
	const form = new formidable.IncomingForm();
	// 設置客戶端上傳文件的存儲路徑
	form.uploadDir = path.join(__dirname, 'public', 'uploads');
	// 保留上傳文件的後綴名字
	form.keepExtensions = true;
	// 解析客戶端傳遞過來的FormData對象
	form.parse(req, (err, fields, files) => {
		// 將客戶端傳遞過來的文件地址響應到客戶端
		res.send({
			path: files.attrName.path.split('public')[1]
		});
	});
});