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

龍恩0707發表於2017-09-27
HTMLORM

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多張圖片上傳前預覽效果如下：

檢視效果

API使用方式及github上的原始碼

相關文章