angularjs上传文件到服务器,AngularJS $http POST中文件上传进度的示例

我正试图从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;

};

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。