我做了这个例子:http://jsfiddle.net/ejx68/6/上传多部分文件,但有两件事我不能做。
1)上传多个文件。因此,在输入
上使用multiple
条件
2)将我在控制器中的其他formData()
追加到服务中。
这里的例子是:
var myApp = angular.module('myApp', []);
myApp.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
myApp.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl, callback){
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(callback)
.error(callback);
}
}]);
myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
$scope.uploadFile = function(){
var file = $scope.myFile;
console.log('file is ' + JSON.stringify(file));
console.log(fileUpload.fd);
fileUpload.fd.append('newID', "2");
var uploadUrl = "http://httpbin.org/post";
fileUpload.uploadFileToUrl(file, uploadUrl,function(data, status, headers, config){
if(status == 200)console.log('Success!');
else console.log('Error!');
});
};
}]);
<div ng-controller = "myCtrl">
<input type="file" file-model="myFile"/>
<button ng-click="uploadFile()">upload me</button>
</div>
感谢