解密”Ajax”技術:輕鬆應對文字和檔案一同上傳的挑戰

概述_ ajax 與 FormData

進行行動網站的bug修改時,遇到其中一個需求是原本只使用 ajax 上傳string格式的input資料,但因為功能擴充除了原本的值要上傳外還需要上傳檔案類型的資料,大部分人都知道,使用 ajax 上傳圖片或檔案需要使用js的FormData物件,若是 ajax 傳遞的資料不包含檔案類型的則基本上都是使用一般的js物件傳遞即可。但其實很多人在遇到同時要傳遞一般input資料及檔案時就會猶豫要如何處理,或是直接將兩件事情分開來做,一是不知道後端如何處理,二是formdata傳送方法的前端return不像一般ajax可設定return物件要被解析的類型(例如text或json),導致有許多人會搞不懂其運作模式,但其實字串跟檔案是可以透過formdata一起傳送到後端處理的,為了讓大家使用上邏輯更為清晰所以撰寫此篇文章作為紀錄。