使用angularjs获取所选文件的来源和名称

Question

上传之前，有没有一种方法可以使用angularJS在输入字段中获取所选文件的名称，路径和大小？

<input type="file" ng-model="fileContent" on-read-file="showContent($fileContent)" />

$scope.showContent = function($fileContent){

    $scope.content = $fileContent;

};

任何人都可以帮助解决这个问题吗？

Answer 1

HTML5 File API将为File您尝试上传的每个文件提供一个对象。该File对象将具有sizeand
name属性，该属性将为您提供文件大小（以字节为单位）和文件名。

但是，用户计算机上文件的物理路径没有属性。

您可以在MDN上阅读有关此内容的更多信息：https : //developer.mozilla.org/en-
US/docs/Using_files_from_web_applications

有关此File对象的更多信息，请访问：https : //developer.mozilla.org/en-
US/docs/Web/API/File

这是一个工作示例：http :
//jsfiddle.net/fmeLz9cd/

给定类型file为id 的输入fileSelected，这是通过File API访问属性的示例：

 $('#fileSelected').on('change', function (evt) {
    var files = $(evt.currentTarget).get(0).files;

    if(files.length > 0) {
        $('#fileName').text(files[0].name);
        $('#fileSize').text(files[0].size);
        $('#filePath').text($('#fileSelected').val());
    }
});

更新资料

既然您已经请求了AngularJS的特定示例，那么以下是在angular应用程序中运行的相同代码：

http://jsfiddle.net/vyc6jq84/1/

<div ng-app="fileDemo">
    <input type="file" fd-input />
</div>

var app = angular.module('fileDemo', []);

app.directive('fdInput', [function () {
    return {
        link: function (scope, element, attrs) {
            element.on('change', function  (evt) {
                var files = evt.target.files;
                console.log(files[0].name);
                console.log(files[0].size);
            });
        }
    }
}]);