1. 程式人生 > >web前端圖片上傳(2)

web前端圖片上傳(2)

  今天發現了一種ajax上傳圖片的方式,是以前沒有用過的,首先來說下為什麼要用這種方式。是因為原來後臺是用的form表單的方式來提交表單資料的。但是覺得呢,這種方式不太好,因為要重新整理頁面,所以我們就改成了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傳輸base64圖片的方式。兩種方式,看後臺怎麼選擇。