AngularJS无法显示上传文件日志 [英] AngularJS Unable to display upload file logs
本文介绍了AngularJS无法显示上传文件日志的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用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指令不适用于<button>元素:
<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屋！
查看全文
