1. FormData的作用

1.1 將Form表單元素,轉換成表單對象

在使用Ajax進行表單提交的時候,采用原生的js獲取dom,然后添加屬性.當表單項很多的時候,代碼會很多.不利于后期閱讀、維護.
這時,可以使用FormData對象,將HTML中的表單元素轉換成表單對象,如下:

<!-- 表單對象 --> <form id="form"><input type="text" name="username" /><input type="text" name="password" /><input type="button" /> </form>

• 將HTML中的DOM元素轉換成表單對象,

var form = document.getElementById('form'); var formData = new FormData(form);// 使用ajax傳遞表單對象 var xhr = new XMLHttpRequest(); xhr.open('post', 'http://localhost:3000/formData') xhr.send(formData);

• 此時,服務器端需要使用 formidable 進行接收
• npm i formidable

const express = require('express') const fomidable = require('formidable'); const app = express(); app.post('/formData',(req, res)=>{// 創建 formidable 實例const form = new formidable.IncomingForm();form.parse(req, (err, fields, files) =>{// 傳遞的參數都在 fields 中 res.send(fields)}) })

1.2 FormData實現二進制文件上傳

• 下面的樣式用到了bootstrap,不導入也沒影響…
• 思路如下:

獲取input表單元素,并監聽它的改變事件(file.onchange)

當input改變時,創建一個FormData實例(new FormData())

將上傳的文件添加到實例中(formData.append())

將文件上傳到服務器(xhr.send)

服務器端接收到上傳的文件,將其保存在/public/uploads中

服務器返回ok

1.2.1 文件上傳的表單控件

<div class="container"><div class="form-group"><label>請選擇文件</label><input type="file" id="file" /> </div>

1.2.2 [客戶端]文件上傳

<script type="text/javascript">var file = document.getElementById('file');// 監聽文件上傳file.onchange = function(){var formData = new FormData();// 將文件的二進制信息(files)放在formData載體中,并取名classNameformData.append('className', this.files[0]);var xhr = new XMLHttpRequest();xhr.open('post', 'http://localhost:3000/uploads');xhr.send(formData);xhr.onload = function () {// 上傳成功,收到服務器端的響應if(xhr.status == 200){console.log(xhr.responseText);}}} </script>

1.2.3 [服務端]文件上傳

• 服務端監聽路由upload
• 使用formidable,來獲取傳遞的表單參數
• 設置保存的路徑form.uploadDir
• 返回信息

const express = require('express'); const formidable = require('formidable'); const path = require('path'); const app = express(); app.post('/upload', (req, res)=>{const form = new formidable.IncomingForm();// 配置表單的屬性form.uploadDir = path.join(__dirname, 'public', ''); // 文件存儲在服務端的路徑form.keepExtensions = true; // 文件保留后綴名// 表單接收 客戶端的 FormData 參數form.parse(req,(err, fields, files)=>{res.send('ok')}) })

2. 參考

源代碼

總結

以上是生活随笔為你收集整理的javascript --- [FormData的使用] 表单元素转换成表单 对象二进制文件上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。