2016-12-03 12 views
1

HTML入力FileUploadを使用してファイルを選択するときに、FileListオブジェクトの値にアクセスしたいとします。私がconsole.logこのFileListオブジェクトを使用すると、コンソールウィンドウでこのオブジェクトを見ることができますが、AngularJSを使用して値にアクセスすることはできません。AngularJSを使用してHTML入力FileUpload FileListオブジェクトにアクセスする方法は?

これは私のコードです: -

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 

<body> 

<div ng-app="myApp" ng-controller="MyCtrl"> 

<input type="file" id="myFile" multiple size="50" ng-model="file" onchange="angular.element(this).scope().myFunction()"> 

<p id="demo" ng-repeat="file in fileList"> 
    Name: {{file.name}} </br> 
    Type: {{file.type}} </br> 
</p> 
{{fileList}} 

</div> 
<script> 
var app = angular.module('myApp', []); 

app.controller('MyCtrl', ['$scope', function($scope){ 
$scope.myFunction = function(){ 
    var x = document.getElementById("myFile"); 
    $scope.fileList = x.files; 
    console.log($scope.fileList); 
}; 
}]); 

</script> 
</body> 
</html> 

答えて

2

このディレクティブは、ファイルを扱うためのかなり良いAPIを持っていますhttps://github.com/danialfarid/ng-file-upload

usage sectionは、複数のファイルを扱うものも含めて、あなたが続くことができるいくつかの例を、持っています。

+0

これはかなりクールです。ありがとう! – Shashank

関連する問題