如何使用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 = https://www.cnblogs.com/lifeisliving/p/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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/288277.html
標籤：jQuery
上一篇：CSS學習(1)