1. 程式人生 > >FormData用法詳解

FormData用法詳解

FormData 物件:
formdata

一.建立一個formData物件例項的方式

1、建立一個空物件

var formData = new FormData();//通過append方法新增資料

2、使用已有表單來初始化物件

//表單示例
<form id="myForm" action="" method="post">
    <input type="text" name="name">名字
    <input type="password" name="psw">密碼
    <input type="submit" value="提交">
</form>

//方法示例
// 獲取頁面已有的一個form表單 var form = document.getElementById("myForm"); // 用表單來初始化 var formData = new FormData(form); // 我們可以根據name來訪問表單中的欄位 var name = formData.get("name"); // 獲取名字 var psw = formData.get("psw"); // 獲取密碼 // 當然也可以在此基礎上,新增其他資料 formData.append("token","kshdfiwi3rh");

二. 操作方法

formData裡面儲存的資料是以健值對的形式存在的,key是唯一的,一個key可能對應多個value。
如果是使用表單初始化,每一個表單欄位對應一條資料,它們的HTML name屬性即為key值,它們value屬性對應value值。
1.獲取值

//通過get(key)/getAll(key)來獲取對應的value
formData.get("name"); // 獲取key為name的第一個值
formData.get("name"); // 返回一個數組,獲取key為name的所有值

2 新增資料

//通過append(key, value)來新增資料,如果指定的key不存在則會新增一條資料,如果key存在,則新增到資料的末尾
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v3");

獲取值時方式及結果如下

formData.get("k1"
); // "v1" formData.getAll("k1"); // ["v1","v2","v3"]

3.設定修改資料

//set(key, value)來設定修改資料,如果指定的key不存在則會新增一條,如果存在,則會修改對應的value值
formData.append("k1", "v1");
formData.set("k1", "1");
formData.getAll("k1"); // ["1"]

4.判斷是否存在對應資料

//has(key)來判斷是否對應的key值
formData.append("k1", "v1");
formData.append("k2",null);

formData.has("k1"); // true
formData.has("k2"); // true
formData.has("k3"); // false

5.刪除資料

//delete(key)刪除資料
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.delete("k1");

formData.getAll("k1"); // []

三.JQuery例項

//新增資料方式見上二。
//processData: false, contentType: false,多用來處理非同步上傳二進位制檔案。
 $.ajax({
    url: 'xxx',
    type: 'POST',
    data: formData,                    // 上傳formdata封裝的資料
    dataType: 'JSON',
    cache: false,                      // 不快取
    processData: false,                // jQuery不要去處理髮送的資料
    contentType: false,                // jQuery不要去設定Content-Type請求頭
    success:function (data) {           //成功回撥
        console.log(data);
    }
});

附:

/**
 * 將以base64的圖片url資料轉換為Blob檔案格式
 * @param urlData 用url方式表示的base64圖片
 */
function convertBase64UrlToBlob(urlData) {
    var bytes = window.atob(urlData.split(',')[1]); //去掉url的頭,並轉換為byte
    //處理異常,將ascii碼小於0的轉換為大於0
    var ab = new ArrayBuffer(bytes.length);
    var ia = new Uint8Array(ab);
    for(var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    }
    return new Blob([ab], {
        type: 'image/png'
    });
}

相關推薦

js FormData用法

  1. 概述 FormData型別其實是在XMLHttpRequest 2級定義的,它是為序列化表以及建立與表單格式相同的資料(當然是用於XHR傳輸)提供便利。 2. 建構函式 建立一個formData

FormData用法

FormData 物件: 一.建立一個formData物件例項的方式 1、建立一個空物件 var formData = new FormData();//通過append方法新增資料 2、使

JavaScript中return的用法

style 返回 www log tle blog 意思 charset fun 1、定義:return 從字面上的看就是返回,官方定義return語句將終止當前函數並返回當前函數的值,可以看下下面的示例代碼: <!DOCTYPE html><html l

SVN trunk(主線) branch(分支) tag(標記) 用法和詳細操作步驟

trac load mar span 必須 最可 objc copy 右鍵 原文地址:http://blog.csdn.net/vbirdbest/article/details/51122637 使用場景: 假如你的項目(這裏指的是手機客戶端項目)的某個版本(例如1.0

js 定時器用法——setTimeout()、setInterval()、clearTimeout()、clearInterval()

ntb 幫助 .get tint num 用法 -c 函數 tel 在js應用中,定時器的作用就是可以設定當到達一個時間來執行一個函數,或者每隔幾秒重復執行某段函數。這裏面涉及到了三個函數方法:setInterval()、setTimeout()、clearI

selenium用法

key url enc element api code 需要 int question selenium用法詳解 selenium主要是用來做自動化測試,支持多種瀏覽器,爬蟲中主要用來解決JavaScript渲染問題。 模擬瀏覽器進行網頁加載,當requests,url

C# ListView用法

ont 結束 server 發生 匹配 鼠標 之前 小圖標 order 一、ListView類 1、常用的基本屬性: (1)FullRowSelect:設置是否行選擇模式。(默認為false) 提示:只有在Details視圖該屬性才有意義

linux cp命令參數及用法---linux 復制文件命令cp

linux file linux cp命令參數及用法詳解---linux 復制文件命令cp [root@Linux ~]# cp [-adfilprsu] 來源檔(source) 目的檔(destination)[root@linux

Python數據類型方法簡介一————字符串的用法

python 字符串連接 字符串用法 符串是Python中的重要的數據類型之一,並且字符串是不可修改的。 字符串就是引號(單、雙和三引號)之間的字符集合。(字符串必須在引號之內,引號必須成對)註:單、雙和三引號在使用上並無太大的區別; 引號之間可以采取交叉使用的方式避免過多轉義;

C# ListView用法(轉)

分組 創建 cti 排列 checkbox 定義 com 程序 erl 一、ListView類 1、常用的基本屬性: (1)FullRowSelect:設置是否行選擇模式。(默認為false) 提示:只有在Details視圖該屬性才有

java中的instanceof用法

定義 xtend print 繼承 interface 參數 保留 如果 ack   instanceof是Java的一個二元操作符(運算符),也是Java的保留關鍵字。它的作用是判斷其左邊對象是否為其右邊類的實例,返回的是boolean類型的數據。用它來判斷某個對象是否是

@RequestMapping 用法

同時 get() turn example track find 說明 tex -h 簡介: @RequestMapping RequestMapping是一個用來處理請求地址映射的註解,可用於類或方法上。用於類上,表示類中的所有響應請求的方法都是以該地址作為父路徑。

Css中路徑data:image/png;base64的用法 (轉載)

javascrip base64編碼 asc cda 文件的 color 情況 ont 背景圖片 大家可能註意到了,網頁上有些圖片的src或css背景圖片的url後面跟了一大串字符,比如: background-image:url(data:image/png;bas

global用法

global 在函數內傳遞參數1、global一般用在函數內,將外部變量參數傳遞至函數內部,用法為:<?php $name = "why"; function changeName(){ global $name; $name = "what";

java中靜態代碼塊的用法—— static用法

super關鍵字 了解 裝載 static關鍵字 super 屬於 註意 lock 自動 (一)java 靜態代碼塊 靜態方法區別一般情況下,如果有些代碼必須在項目啟動的時候就執行的時候,需要使用靜態代碼塊,這種代碼是主動執行的;需要在項目啟動的時候就初始化,在不創建對象的

<!CDATA[]]用法

引號 ica lap 用法 bsp mar ret message eight 所有 XML 文檔中的文本均會被解析器解析。 只有 CDATA 區段(CDATA section)中的文本會被解析器忽略。 PCDATA PCDATA 指的是被解析的字符數據(Parsed

Es6 Promise 用法

set 問題 得到 math clas promise 回調 console spa Promise是什麽?? 打印出來看看 console.dir(Promise) 這麽一看就明白了,Promise是一個構造函數,自己身上有all、reject、r

[轉] angular2-highcharts用法

ppc tip option select sel nbsp 用法詳解 points ttr 1、 使用npm安裝angular2-highcharts npm install angular2-highcharts --save 2、主模塊中引入 app.module.t

常見<meta>的基本用法

代碼 簡介 clas 元素 word spa wid min mpat <meta charset="utf-8"> 定義與name 屬性相關的信息,使用 utf-8編碼方式編譯字符 <meta http-equiv="X-UA-Compatible" c

oracle中的exists 和not exists 用法

sdn ref 用法詳解 html nbsp e30 .net tail sin oracle中的exists 和not exists 用法詳解 http://blog.csdn.net/zhiweianran/article/details/7868894oracle