ajax上傳圖片,HTML5可預覽多圖片ajax上傳(使用formData傳遞數據)

HTML5可預覽多圖片ajax上傳(使用formData傳遞數據)

在介紹上傳圖片之前，我們簡單的來了解下FormData的基本使用；介紹完成后這些基本知識后，我們會在文章最后提供一個demo，就是ajax多圖片上傳前預覽效果。

1. formData的基本的用法：

首先創建一個 空對象實例 代碼如下：

var formData = new FormData();

1-1 獲取值

通過get(key)/getAll(key)來獲取對應的value；比如：

formData.get("name"); //獲取key為name的第一個值。

formData.getAll("name"); //返回一個數組，獲取key為name的所有值。

比如如下HTML代碼：

標題

//表單初始化

varform=document.getElementById('myForm');varsubmitId=document.getElementById("submitId");

submitId.addEventListener('click',function(e){

e.preventDefault();varformData= newFormData(form);//獲取名字

varname=formData.get("name");varpsw=formData.get("password");

console.log(name);

console.log(psw);//使用getAll 獲取name為n1的所有值

vararrs=formData.getAll("n1");

console.log(arrs);//返回一個數組

},false);

1-2 添加數據

可以通過append(key, value)來添加數據，如果指定的key不存在則會新增一條數據，如果key存在，則添加到數據的末尾。

var formData = newFormData();

formData.append('name', 'kongzhi1');

formData.append('name', 'kongzhi2');

formData.append('name', 'kongzhi3');

console.log(formData.get('name')); //kongzhi1

console.log(formData.getAll('name')); //["kongzhi1", "kongzhi2", "kongzhi3"]

1-3 設置修改數據

可以通過 set(key, value)來設置修改數據，如果指定的key不存在則會新增一條，如果存在，則會修改對應的值。

var formData = newFormData();

formData.append("name", 'kongzhi1');

console.log(formData.getAll("name")); //["kongzhi1"]

formData.set("name", 'kongzhi2');

console.log(formData.getAll("name")); //["kongzhi2"]

1-4 判斷是否存在該數據

我們可以通過has(key) 來判斷是否有對應的key值。

var formData = newFormData();

formData.append("name", 'kongzhi1');

formData.append("name2", null);

console.log(formData.has("name")); //true

console.log(formData.has("name2")); //true

console.log(formData.has("name3")); //false

1-5 刪除數據

通過delete(key), 來刪除數據。

var formData = newFormData();

formData.append("name", "kongzhi1");

formData.append("name", "kongzhi2");

console.log(formData.getAll("name")); //["kongzhi1", "kongzhi2"]

formData.delete("name");

console.log(formData.getAll("name")); //[]

二：使用XMLHttpRequest formData上傳文件

XMLHttpRequest2 定義了FormData類型，FormData為序列化表單以及創建與表單格式相同的數據(用於通過xhr數據傳輸)提供了便利。

瀏覽器支持：IE9及IE9-不支持。

原審XMLHttpRequest提交formData數據如下demo：

標題

上傳圖片