如何使用Ajax實現簡單的檔案上傳

一、起因

相信大家在做web專案中難免會遇到檔案上傳的業務需求，上傳檔案一般是通過表單來上傳，但當我們不想使用表單時就可以通過Ajax的方式來上傳檔案，這裡就給大家分享使用Ajax上傳檔案的方法。

二、web頁面

這裡我簡單地寫了一個Demo頁面，由一個input，一個button組成。在button的點選事件中寫上傳檔案的Ajax請求，程式碼如下圖所示：

效果圖：

程式碼解析：要想使用檔案上傳，我們要用到input控制元件並將它的type屬性設定為file。

通過在控制檯輸入 $("#exampleInputFile")[0].files[0] 可以檢視到檔案的資訊，然後我們通過formdata.append方法將其新增至FormData中：

請求型別設定為post沒什麼好說的，注意這裡要將contentType設為false，目的是防止上傳檔案中出現分界符導致伺服器無法正確識別檔案起始位置，這就涉及到了http協議的知識，

想要深度研究的小夥伴可自行百度，這裡推薦大佬的文章--“淺談contentType = false”。

一般來說，用了contentType = false，可以再加上一個processData = flase，可以參考processData的解釋：

processData
型別：Boolean
預設值: true。預設情況下，通過data選項傳遞進來的資料，如果是一個物件(技術上講只要不是字串)，都會處理轉化成一個查詢字串，以配合預設內容型別 “application/x-www-form-urlencoded”。
如果要傳送 DOM 樹資訊或其它不希望轉換的資訊，請設定為 false。
 

三、後臺伺服器

使用C#的同學可以直接使用Request.Files拿到相應資料然後進行儲存等操作：

注意一下：如果檔案較大的活，記得在配置檔案中設定maxAllowedContentLength和maxRequestLength，解除檔案傳輸大小限制，詳情見大神文章--“ASP.NET 設定檔案上傳的最大大小”。

使用其他語言的小夥伴們就自行百度怎麼拿到Ajax上傳的檔案了，本文僅作為個人學習參考，有問題歡迎大家指出。

參考文章：

ajax實現檔案上傳（使用FormData）

淺談contentType = false