用AJAX實現上傳圖片或者文件的方法

你們好，我是小C，最近在項目中用到ajax上傳圖片文件，本篇咱們就說說ajax上傳文件。

咱們平時用到的AJAX，大部分都是傳幾個參數就能夠了。簡單說就是傳幾個字符串。

 1     $.ajax({
 2         url: url,
 3         type: 'post/get',
 4         data: {
 5             param1: 'value1',
 6             param2: 'value2'
 7         },
 8         success: function(data) {
 9             console.log(data);
10         }
11     })

上面這代碼就是日常咱們比較經常使用到的ajax寫法；

可是若是咱們要上傳圖片或者文件呢？難道咱們仍是傳一下字符串就好了嗎？

當你給後臺傳圖片時，你傳的是一個文件 而再也不是普通的string類型的值。而是file類型 ，也就是文件類型

想要經過AJAX上傳圖片，要加幾個代碼：

 

1.在ajax中加上 processData : false,

 

2.在ajax中加上 contentType : false,

 

3.在ajax中加上 async:false,

4.主要是改變ajax中的data這個屬性：請看下面的完整代碼

 

 1  var formData = new FormData();     　　　　// 利用FormData實現圖片上傳
 2  var img = document.getElementById("id"); //files是原生js，因此咱們要獲取到type爲file的input
 3  var fiObj = img.files[0];       　　　　　 // 用過files獲取圖片
 4  formData.append('pic',fiObj);    　　　　　// 給formData用append圖片，若是有其餘還須要傳的參數也同樣所有append到formData
 5  $.ajax({
 6  　　url: url,
 7     type: 'post',
 8     processData : false,
 9     contentType : false,
10     async:false,
11     data: formData,    　　　　　　// 主要看這裏，就直接把咱們實例回來的formData傳過去就好了。 12     success: function(data) {
13         console.log(data);
14     }
15 }) 

 

有不足的地方，請多多指教。