如何使用Ajax實現簡單的文件上傳

如何使用Ajax實現簡單的文件上傳

1、原由

相信你們在作web項目中不免會遇到文件上傳的業務需求，上傳文件通常是經過表單來上傳，但當咱們不想使用表單時就能夠經過Ajax的方式來上傳文件，這裏就給你們分享使用Ajax上傳文件的方法。

2、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。

3、後臺服務器

使用C#的同窗能夠直接使用Request.Files拿到相應數據而後進行保存等操做：

注意一下：若是文件較大的活，記得在配置文件中設置maxAllowedContentLength和maxRequestLength，解除文件傳輸大小限制，詳情見大神文章--「ASP.NET 設置文件上傳的最大大小」。

使用其餘語言的小夥伴們就自行百度怎麼拿到Ajax上傳的文件了，本文僅做爲我的學習參考，有問題歡迎你們指出。

參考文章：

ajax實現文件上傳（使用FormData）

淺談contentType = false