我正試圖從AngularJS $http POST請求擷取檔案上傳的“進度”事件.
有沒有人實作這個工作？如果是這樣,可以展示這個例子嗎？
PS.我甯願繼續使用$http而不是建立自己的XMLHttpRequest.原因是我的後端希望将json對象與多部分檔案資料結合起來.并且嘗試通過XMLHttpRequest失敗,并顯示錯誤消息,即後端未看到請求的json對象部分“必需字元串參數’objData’不存在.用戶端發送的請求在文法上是不正确的.”在POST消息中,我在Firebug中看到“Content-Disposition：form-data; name =”objData“”.
$scope.uploadFile = function() {
var url = buildUrl('/upload');
var data = {objData: $scope.data,fileData: $scope.file};
var formData = new FormData();
formData.append("objData",angular.toJson(data.objData));
formData.append("fileData",data.fileData);
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress",uploadProgress,false);
xhr.open("POST",url);
xhr.setRequestHeader("Content-Type","application/json;charset=utf-8");
xhr.setRequestHeader("X-Requested-With","XMLHttpRequest");
xhr.send(formData);
};
在撰寫本文時,$http不支援新1.2 $q的通知方法.是以你必須使用jquery xhr.它設定起來相當簡單：
請注意,我們傳回一個promise,是以uploadFile的使用者将執行uploadFile(..).然後(成功,失敗,進度)
$scope.uploadFile = function() {
var deferred = $q.defer();
var getProgressListener = function(deferred) {
return function(event) {
//do some magic
deferred.notify(magic);
};
};
var formData = new FormData();
formData.append("objData",angular.toJson(data.objData));
formData.append("fileData",data.fileData);
$.ajax({
type: 'POST',url: buildUrl('/upload'),data: formData,cache: false,// Force this to be read from FormData
contentType: false,processData: false,success: function(response,textStatus,jqXHR) {
deferred.resolve(response);
},error: function(jqXHR,errorThrown) {
deferred.reject(errorThrown);
},xhr: function() {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener(
'progress',getProgressListener(deferred),false);
} else {
$log.log('Upload progress is not supported.');
}
return myXhr;
}
});
return deferred.promise;
};
總結
如果覺得程式設計之家網站内容還不錯，歡迎将程式設計之家網站推薦給程式員好友。
本圖文内容來源于網友網絡收集整理提供，作為學習參考使用，版權屬于原作者。