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类型为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特定示例，因此在角度应用中使用的代码相同：

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);
            });
        }
    }
}]);

Answer 2

除非服务器有帮助，否则你不能。 Angular正在您的浏览器中运行，无法读取服务器或浏览器计算机的文件系统。如果你想获得一个文件，你需要服务器来实现这样做的东西。

现在，如果它是静态文件，并且已经由服务器提供，那么您可以通过$http阅读它。

$http.get(filename).success(function(data){
  // data contains the file content
});

但它可能会根据文件类型等进行解释。这完全假设该文件已由服务器提供。

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

2 个答案: