我正在尝试使用 angularjs 创建一个文件上传函数，它将只接受文件并将其发送到服务器端（Django）。为了确保文件上传功能正常工作，我在多个位置放置了多个console.log。但是，没有显示任何日志。这是我的代码：
.html:
<body ng-app="myApp" ng-controller="appCtrl">
<input type="file" id="file" name="files" accept="text/*"
data-url="file" class="inputfile_upload"
ng-model="uploadedFile"/>
<label for="file"> <span id="chooseFile"></span>Upload a file!</label>
<button id="submitBtn" type="submit" ng-click="upload()"
ng-model="uploadBtn">Upload</button>
</body>
指令.js：
app.directive("appDirective", function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.appDirective);
var modelSetter = model.assign;
element.bind('change', function() {
scope.$apply(function() {
modelSetter(scope, element[0].files[0]);
});
});
}
};
});
控制器.js：
var app = angular.module('myApp', [])
app.controller('appCtrl', function ($scope, $rootScope, $http, fileUploadService){
$scope.$watch('uploadBtn', function (newVal, oldVal) {
var submitBtn = document.getElementById('submitBtn');
$scope.upload = function() {
if(newVal == true){
$scope.upload = function() {
var file = $scope.uploadedFile;
console.log('file is ' );
console.dir(file);
var uploadUrl = "/file";
fileUploadService.uploadFileToUrl(file, uploadUrl);
$http({
method:'GET'
})
.success(function(data) {
console.log("success");
})
.error(function(data){
console.log("failed");
})
};
}
}
)}
服务.js：
app.factory('fileUploadService', function ($rootScope, $http) {
var service = {};
service.uploadFileToUrl = function upload(file, uploadUrl){
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
console.log("Files added");
})
.error(function(){
console.log("Files not successfully added");
});
}
return service;
});
