我正在尝试使用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>
directive.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]);
});
});
}
};
});
controller.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");
})
};
}
}
)}
Service.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;
});
<button id="submitBtn" type="submit" ng-click="upload()"
̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶u̶p̶l̶o̶a̶d̶B̶t̶n̶"̶ >Upload</button>
仅将一个功能分配给$scope.upload：
var app = angular.module('myApp', [])
app.controller('appCtrl', function ($scope, $rootScope, $http, fileUploadService){
̶$̶s̶c̶o̶p̶e̶.̶$̶w̶a̶t̶c̶h̶(̶'̶u̶p̶l̶o̶a̶d̶B̶t̶n̶'̶,̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶n̶e̶w̶V̶a̶l̶,̶ ̶o̶l̶d̶V̶a̶l̶)̶ ̶{̶
̶v̶a̶r̶ ̶s̶u̶b̶m̶i̶t̶B̶t̶n̶ ̶=̶ ̶d̶o̶c̶u̶m̶e̶n̶t̶.̶g̶e̶t̶E̶l̶e̶m̶e̶n̶t̶B̶y̶I̶d̶(̶'̶s̶u̶b̶m̶i̶t̶B̶t̶n̶'̶)̶;̶
̶$̶s̶c̶o̶p̶e̶.̶u̶p̶l̶o̶a̶d̶ ̶=̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶(̶)̶ ̶{̶
̶i̶f̶(̶n̶e̶w̶V̶a̶l̶ ̶=̶=̶ ̶t̶r̶u̶e̶)̶{̶
$scope.upload = function() {
var file = $scope.uploadedFile;
console.log('file is ' );
console.dir(file);
//...
};
//...
})
console.log语句将在单击按钮时显示。