FormData對象

一、概述

FormData就是表單數據，我們提交表單所用的數據，H5里新加了FormData對象，可以讓我們對表單數據進行操作，甚至自己組裝表單數據進行提交，而不是單純的僅僅是頁面上表單里的元素。

FormData對象的使用：

1.用一些鍵值對來模擬一系列表單控件:即把form中所有表單元素的name與value組長成一個queryString

2.異步上傳二進制文件

二、使用

1、構造函數返回一個FormData對象，FormData對象的操作方法，全部在原型中，自己本身沒有任何的屬性及方法

2、使用formData對象發送文件

注意1：使用jQuery

注意2：參數

一個HTML表單元素，可以包含任何形式的表單控件，包括文件輸入框，參數可選

new FormData的參數是一個DOM對象，而非jQuery對象

var formData = new FormData($('#file')[0])

三、jQuery的參數序列化方法serialize()

序列表表格內容為字符串，用于 Ajax 請求。?

$("form").serialize()

四、FormData對象的方法

append

給當前formData對象添加一個鍵/值對 formData.append('name',value);formData.append('grade','5').............組裝出來form數據后我們可以通過表單或者AJAX往后臺發送請求。

FileReader對象

FileReader對象允許web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩沖區）的內容，使用file或者blob對象置頂要讀取的文件或者數據

其中File對象可以是用戶在一個元素上選擇文件后返回的fileList對象，也可以來自拖放操作生成的Datatransfer對象，還可以是在HTM;CanvasElement上執行mozGetAsFile()方法后返回結果

構造函數

FileReader() return a newly constructed FileReader返回一個FileReader對象。

方法

處理方法：

其中我們可以使用readAsDataURL()在文件讀取完畢后讀取為base64然后可以實現簡單的本地圖像預覽。

其中，處理方法的主要程序如下，將處理封裝成函數

參考文檔：https://www.jianshu.com/p/97e76a00a9e9

總結

以上是生活随笔為你收集整理的FileReader对象和FormData对象的全部內容，希望文章能夠幫你解決所遇到的問題。

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