當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript --- [FormData的使用] 表单元素转换成表单 对象二进制文件上传
生活随笔
收集整理的這篇文章主要介紹了
javascript --- [FormData的使用] 表单元素转换成表单 对象二进制文件上传
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. FormData的作用
1.1 將Form表單元素,轉換成表單對象
在使用Ajax進行表單提交的時候,采用原生的js獲取dom,然后添加屬性.當表單項很多的時候,代碼會很多.不利于后期閱讀、維護.
這時,可以使用FormData對象,將HTML中的表單元素轉換成表單對象,如下:
- 將HTML中的DOM元素轉換成表單對象,
- 此時,服務器端需要使用 formidable 進行接收
- npm i formidable
1.2 FormData實現二進制文件上傳
- 下面的樣式用到了bootstrap,不導入也沒影響…
- 思路如下:
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
- 返回信息
2. 參考
源代碼
總結
以上是生活随笔為你收集整理的javascript --- [FormData的使用] 表单元素转换成表单 对象二进制文件上传的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: mysql获取后一天_mysql获取当前
- 下一篇: javascript --- [For