AngularJS 无法显示上传文件日志 [英] AngularJS Unable to display upload file logs
问题描述
我正在尝试使用 angularjs 创建一个文件上传功能，它只会接受文件并将其发送到服务器端 (Django).为了确保文件上传功能正常工作，我在多个位置放置了多个 console.log.但是，不会显示任何日志.这是我的代码:
I am trying to create a file upload function using angularjs which will just accept the file and send it to the server side (Django). To ensure the file upload function is working fine, I've placed multiple console.log in multiple locations. However, none of the logs are displayed. This are my codes:
.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:
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:
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:
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;
});
推荐答案
ng-model 指令不适用于 元素:
The ng-model directive does not work with <button> elements:
<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分配一个函数:
Simply assign a function to $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 语句将在单击按钮时显示.
The console.log statements will show upon clicking the button.
这篇关于AngularJS 无法显示上传文件日志的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
