1. FormData的作用

1.1 將Form表單元素,轉(zhuǎn)換成表單對象

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

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

• 將HTML中的DOM元素轉(zhuǎn)換成表單對象,

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);

• 此時,服務(wù)器端需要使用 formidable 進(jìn)行接收
• npm i formidable

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

1.2 FormData實現(xiàn)二進(jìn)制文件上傳

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

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

當(dāng)input改變時,創(chuàng)建一個FormData實例(new FormData())

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

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

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

服務(wù)器返回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');// 監(jiān)聽文件上傳file.onchange = function(){var formData = new FormData();// 將文件的二進(jìn)制信息(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 () {// 上傳成功,收到服務(wù)器端的響應(yīng)if(xhr.status == 200){console.log(xhr.responseText);}}} </script>

1.2.3 [服務(wù)端]文件上傳

• 服務(wù)端監(jiān)聽路由upload
• 使用formidable,來獲取傳遞的表單參數(shù)
• 設(shè)置保存的路徑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', ''); // 文件存儲在服務(wù)端的路徑form.keepExtensions = true; // 文件保留后綴名// 表單接收 客戶端的 FormData 參數(shù)form.parse(req,(err, fields, files)=>{res.send('ok')}) })

2. 參考

源代碼

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。