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圖片的方式。其實兩種方式都是可以的,但是需要看后台怎么選擇。畢竟前后台需要合作,哪種方式只需要前后台商量好就行。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM