jquery file upload 在http Header中增加header項

阿新 • • 發佈：2019-01-16

最近用jquery-file-upload外掛做上傳檔案的功能。

其他的功能都齊了，但是遇到一個問題，後臺對於每一次請求都要驗證一下是不是登入使用者發過來的，根據就是http 請求頭中的兩項 username 和 password，對於應用前端的其他功能，每一次請求中都會在headers中設定這兩項，angular js提供了這個功能，程式碼如下：

setAuthHeaders: function ($http, email, password) {
        $http.defaults.headers.common['username'] = email;
        $http.defaults.headers.common['password'] = password;
    },

但是，現在是在jquery file upload這個外掛裡，它有自己的一套http通訊機制，所以很難在javascript中動手腳新增前面所說的那兩項。這個問題折騰了一天多還是沒有解決。

週四，在翻看jquery.fileupload.js的原始檔時，無意中看到一個方法，叫做 _initXHRData ，從名字看似乎是在初始化一些準備提交的資料，然後這個方法體裡面有幾行程式碼引起了我的注意：

 if (options.contentRange) {
                options.headers['Content-Range'] = options.contentRange;
            }

咦！這不就是在設定 headers嗎？！於是乎，在這一段的上面自己加了兩行：

//For Test---------------
			options.headers['username'] = fs.common.getSignedUser().email;
			options.headers['password'] = fs.common.getSignedUser().password;
			//-----------------------
            if (options.contentRange) {
                options.headers['Content-Range'] = options.contentRange;
            }

也就是在options.headers中增加我這個應用中的當前使用者名稱和密碼。

然後再次執行傳送功能，果然Headers中就有了username和password這兩項，哈哈！

總結一下，很多時候遇到一些古怪的需求和問題，絕大多數都是可以克服的，只是需要相當的耐心去一點一點發掘相關的資訊。

jquery file upload 在http Header中增加header項

jquery file upload 在http Header中增加header項

斐迅面試記錄—Http協議中的Header

在NodeJS中使用jQuery file upload plugin

修改http請求中的header：要修改的主要欄位

Spring-boot之jQuery File Upload後臺配置方法

批量上傳圖片(jQuery-File-Upload使用)

jQuery-File-Upload不相容IE8解決方案

jQuery-File-Upload 檔案上傳外掛

SpringBoot使用jQuery File Upload圖片上傳伺服器回顯相關

jquery file upload示例

jQuery-File-Upload 使用筆記（一）基礎外掛配置

jQuery-file-Upload使用介紹

jQuery-file-upload外掛的使用（小例項）

jquery file upload外掛動態修改url

MVC頁面移除HTTP Header中服務器信息

http request header 中的host行的作用

HTTP Cookie header 中set-cookie格式

使用jQuery傳送AJAX請求時在header中新增Token

SpringCloud工作筆記048---RESTful API 中 HTTP 狀態碼的定義_以及把RESTFul版本號_放到http協議header中_以及RestFul設計時的兩個誤區

關於http請求的header中Content-type如果為multipart/form-data，是用來傳遞多種型別的引數，如又可以傳遞附件、又可以傳遞文字，在body中為什麼需要分隔符

jquery file upload 在http Header中增加header項

相關推薦