web前端圖片上傳(2)

　　今天發現了一種ajax上傳圖片的方式，是之前沒有用過的，首先來講下爲何要用這種方式。是由於原來後臺是用的form表單的方式來提交表單數據的。可是以爲呢，這種方式不太好，由於要刷新頁面，前臺只用控制檯看不到傳輸的參數（若是哪位大神知道怎麼看到，請不吝賜教），因此咱們就改爲了ajax的方式，結果後臺老哥說，前端改改就好了，後端不用改。而後我去找到了這種ajax提交表單的方式。廢話很少說，直接看代碼。

 1 var formData = new FormData();//首先這裏新建一個空對象  2                     formData.append("file", document.getElementById("file").files[0]);//這裏是一個圖片的input框，id爲file。appen的第一個參數，是後臺的傳輸的字段  3                     formData.append("reward_name", reward_name);  4                     formData.append("reward_id", reward_id);  5                     formData.append("reward_num", reward_num);  6                     formData.append("exchange_num", exchange_num);  7  $.ajax({  8                         url:"__ROOT__/index.php/Administration/Gamemanage/add_icon",  9                         type:"post", 10                         processData:false, //這裏須要注意，必定要寫false，由於有圖片，因此不須要序列化 11                         contentType:false, //這裏也是一個須要注意的點。也要寫false 12  data:formData, 13                         dataType:'json', 14                         success:function(data){ 15                             if(data.info=="添加成功"){ 16  alert(data.info); 17  window.reload(); 18                             }else{ 19  alert(data.info); 20  } 21  } 22                     });

　　這種方法和我上次寫的那個是不同的，此次的方法是直接提交一個文件。咱們來看下這種方式的請求頭，和通常的ajax是不同的。請看截圖

 

裏面的參數就是我上面代碼中寫的參數，你們能夠一一對應起來。

　　附上上一篇的連接。這是另外一種ajax傳輸base64圖片的方式。其實兩種方式都是能夠的，可是須要看後臺怎麼選擇。畢竟先後臺須要合做，哪一種方式只須要先後臺商量好就行。