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代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>標題</title> </head> <body> <form id="myForm"> <input type="text" name="name" placeholder="請輸入你的名字" /> <input type="password" name="password" placeholder="請輸入你的密碼" /> <input type="text" name="n1" /> <input type="text" name="n1" /> <input type="submit" id="submitId" value="提交" /> </form> <script> // 表單初始化 var form = document.getElementById('myForm'); var submitId = document.getElementById("submitId"); submitId.addEventListener('click', function(e){ e.preventDefault(); var formData = new FormData(form); // 獲取名字 var name = formData.get("name"); var psw = formData.get("password"); console.log(name); console.log(psw); // 使用getAll 獲取name為n1的所有值 var arrs = formData.getAll("n1"); console.log(arrs); // 返回一個數組 }, false); </script> </body> </html>
1-2 添加數據
可以通過append(key, value)來添加數據，如果指定的key不存在則會新增一條數據，如果key存在，則添加到數據的末尾。
var formData = new FormData(); 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 = new FormData(); 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 = new FormData(); 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 = new FormData(); 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：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>標題</title> </head> <body> <form name='form1' id='form1'> <input type='file' name='imgFile' /> <input type='text' name='name1' /> <input type='text' name='name2' /> <div id="uploadImg">上傳圖片</div> </form> <script> var form1 = document.getElementById("form1"); var uploadImg = document.getElementById("uploadImg"); var xml = new XMLHttpRequest(); uploadImg.addEventListener('click', function(e){ e.preventDefault(); var formData = new FormData(form1); xml.open("POST", url, true); xml.send(forData); }); </script> </body> </html>
2-2 使用jquery ajax方式來上傳formData數據如下：
HTML代碼如下：
<div id="container"> <a href="javascript:void(0)" class="file">選擇文件 <input type='file' id="file" multiple accept = 'image/gif,image/jpeg,image/jpg,image/png' /> <input type="hidden" /> </a> </div>
javascript 代碼如下：
var formdata = new FormData(); // 上傳到服務器的字段名稱 formdata.append("imgFile", $('#file')[0].files[0]); $.ajax({ url: self.url, type: 'POST', cache: false, data: formdata, timeout: 5000, //必須false才會避開jQuery對 formdata 的默認處理 // XMLHttpRequest會對 formdata 進行正確的處理 processData: false, //必須false才會自動加上正確的Content-Type contentType: false, xhrFields: { withCredentials: true }, success: function(data) { }, error: function(XMLHttpRequest, textStatus, errorThrown) { }
如上參數設置含義如下：
1. processData: false, 因為data值是formdata對象，不需要對數據做處理。
2. cache: false, 上傳文件不需要緩存。
3. contentType: false, 因為是由<form>表單構造的FormData對象，且已經聲明了屬性enctype="multipart/form-data"，所以這里設置為false。
4. xhrFields: { withCredentials: true }, 跨域請求設置
下面是一個 使用 ajax中的formData 多張圖片上傳前預覽效果的一個demo。
formData 對ajax多張圖片上傳前預覽效果如下：