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

Question

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

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

$scope.showContent = function($fileContent){

    $scope.content = $fileContent;

};

谁能帮忙解决这个问题？

Answer 1

HTML5 文件 API 将为您尝试上传的每个文件提供一个 File 对象。此 File 对象将具有 size 和 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 的输入，以下是通过文件 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);
            });
        }
    }
}]);