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

時間 2019-11-11

標籤 html5 html 預覽圖片 ajax 上傳使用 formdata 傳遞數據欄目 HTML5 简体版

原文原文鏈接

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

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

1. formData的基本的用法：
首先建立一個空對象實例代碼以下：
var formData = new FormData();html5

1-1 獲取值
經過get(key)/getAll(key)來獲取對應的value；好比：java

formData.get("name"); // 獲取key爲name的第一個值。
formData.getAll("name"); // 返回一個數組，獲取key爲name的全部值。

好比以下HTML代碼：jquery

<!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存在，則添加到數據的末尾。git

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不存在則會新增一條，若是存在，則會修改對應的值。github

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值。ajax

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上的源碼