JQuery利用FormData實現異步提交數據文件的方法

本篇文章為大家展示了JQuery利用FormData實現異步提交數據文件的方法，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

一：jquery.js中的$.ajax方法

此方法依賴jquery.js插件，有很多版本，可以自己下載。

我們需要在此$.ajax方法中指定一些參數，比如請求地址、請求類型、所需要傳輸的數據、請求成功后需要執行的操作，這里簡略說一下。

$.ajax({
    url:"你的url地址",
    type:'post',
    data:{key:'value'},
    success:function(){
      alert('成功')；
    }
  })

這是$.ajax方法的簡單用法。其中參數data是你要傳輸的數據，這里的data支持Json對象和字符串。data數據如果是一個form表單里面的，自己寫一個json很慢，可以使用jquery里面的serizlize()方法。這個方法返回一個字符串（每個form表單提交的時候也是轉化為相同格式的字符串）。

$.ajax({
    url:"你的url地址",
    type:'post',
    data:$('form').serialize(), // "id=asdasd&s=000&name=1233"
    success:function(){
      alert('成功')；
    }
  })

那么，文件也是這樣提交的嗎？

對于文件的提交我們需要對$.ajax進行一些特殊的設置，并且使用FormData的對象。

<input type="file" name="f" id="f" multiple>

var fd = new FormData();
    fd.append("name", "bill");
    fd.append("photo", $('#f')[0].files[0]);
    fd.append("photo2", $('#f')[0].files[1]);
    $.ajax({
      url: '/webform1.aspx',
      type: 'post',
      processData: false,
      contentType: false,
      data: fd,
      success: function () {
        alert("ok")
      }
    })

我們創建一個fd對象并向其中添加鍵值對，這個值可以是一個文件。$('#f')[0]是取出id=f的元素，至于為什么是[0]，這是因為jquery對象都有一個默認為0的索引用來取出其Dom元素，$('f')是一個jquery對象，[0]為Dom元素 可以用dom的所有屬性和方法。然后使用files來取出文件。這里我使用了files[0]和files[1]，這是multiple可以上傳多個文件我這里上傳了兩個。

然后服務器就可以接收文件了，和表單一樣的接收方法。

當然可以把一個form直接轉化為一個FormData對象，這樣我們可以避免把所需內容一個個append到FormData里面。

var fd = new FormData(document.querySelector("form"));
fd.append("CustomField", "This is some extra data");
$.ajax({
 url: "stash.php",
 type: "POST",
 data: fd,
 processData: false, // 不處理數據
 contentType: false  // 不設置內容類型
});

使用append添加時formdata的key若已存在，則不能重復添加，會忽略本次append操作，這在對于使用經常需要表單取出值是相當不利的，所以建議使用set方法來添加新的key-value值，set的意思是修改一個已經存在的鍵值對，如果不存在的話就創建一個。即

fd.set("CustomField", "This is some extra data");
$.ajax是主動事件，而我們希望當用戶點擊按鈕才執行，這里可以將$.ajax函數放在一個按鈕的click事件里面，也可以使用下面的方法。

$('form').submit(function{
  // 你自己的代碼，一般是數據合法性驗證
$.ajax({ 
     
   });
   return false;
})

submit函數可以在表單被提交時執行，我們可以用來將其作為執行$.ajax函數的觸發事件，然后使用return false來提前阻止這個表單的提交。

注意：有些文章里說FormData的兼容問題，FormData很早就提出來了。并且入股喲你想要使用jquery里面的ajax來傳輸文件就免不了使用它這是因為下面兩個方法也用到了FormData。當然原生的ajax有直接傳輸文件的方法，感興趣的人可以看下。

上述內容就是JQuery利用FormData實現異步提交數據文件的方法，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。