javascript Angularjs 文件上传不起作用（$files 未定义）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25641822/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs file upload doesn't work ($files is undefined)
提问by thisninja
I use danialfarid library fileUpload.
我使用 danialfarid 库文件上传。
https://github.com/danialfarid/angular-file-uploadAnd i do same things like in "Usage article on GitHub page", but i have an error after i chose file: "Uncaught TypeError: Cannot read property 'length' of undefined" and this undefined is $files.
https://github.com/danialfarid/angular-file-upload我在“GitHub页面上的使用文章”中做同样的事情，但在我选择文件后出现错误：“未捕获的类型错误：无法读取属性‘长度’未定义”，这个未定义是 $files。
Here is my Controller:
这是我的控制器：
$scope.onFileSelect = function($files) {
console.log($files); // undefined
//$files: an array of files selected, each file has name, size, and type.
for (var i = 0; i < $files.length; i++) {
var file = $files[i];
$scope.upload = $upload.upload({
url: '/cards/avatar/save_from_disk', //upload.php script, node.js route, or servlet url
data: {myObj: $scope.myModelObj},
file: file,
}).progress(function(evt) {
console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
}).success(function(data, status, headers, config) {
// file is uploaded successfully
console.log(data);
});
}
};
};
And in my view:
在我看来：
<input type="file" title="" accept="image/*" ng-file-select="onFileSelect($files)" class="upload" />
回答by sylwester
More likely you missed something please see working example that should helps: http://plnkr.co/edit/fbALEktGuyDY2CNUrwrL?p=preview
您更可能错过了一些内容，请参阅应该有帮助的工作示例：http: //plnkr.co/edit/fbALEktGuyDY2CNUrwrL?p=preview
JS:
JS：
var app = angular.module('plunker', ['angularFileUpload']);
app.controller('MainCtrl',['$scope', '$upload', function($scope, $upload) {
$scope.onFileSelect = function($files) {
console.log($files); // undefined
//$files: an array of files selected, each file has name, size, and type.
for (var i = 0; i < $files.length; i++) {
var file = $files[i];
$scope.upload = $upload.upload({
url: '/cards/avatar/save_from_disk', //upload.php script, node.js route, or servlet url
data: {
myObj: $scope.myModelObj
},
file: file,
}).progress(function(evt) {
console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
}).success(function(data, status, headers, config) {
// file is uploaded successfully
console.log(data);
});
}
};
}
]);
HTML:
HTML：
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
<script src="http://angular-file-upload.appspot.com/js/angular-file-upload.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="file" title="" accept="image/*" ng-file-select="onFileSelect($files)" class="upload" />
</body>
</html>
