得到与angularjs所选文件的源代码和名称 [英] get source and name of selected file with angularjs

问题描述

有没有办法让名，路径和使用angularJS输入字段选择的文件大小，
在上传之前？

Is there a way to get name, path and size of selected file in input field using angularJS, before uploading it?

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

$scope.showContent = function($fileContent){

    $scope.content = $fileContent;

};

谁能帮助解决这个好吗？

Can anyone help to solve this please?

推荐答案

HTML5文件API会给你一个文件对象，你想上载的每个文件。这文件对象有一个尺寸和名称属性，该属性会给你以字节文件大小和文件的名称

The HTML5 File API will give you a File object for each file that you're attempting to upload. This File object will have a size and name property which will give you the file size in bytes and the name of the file.

有对到用户计算机上的文件的物理路径没有财产，虽然。

There's no property for the physical path to the file on the users machine, though.

您可以阅读更多关于此的MDN： https://developer.mozilla.org / EN-US /文档/ Using_files_from_web_applications

You can read more about this on MDN: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

在文件对象位置的更多信息：的 https://developer.mozilla.org/en-US/docs/Web/API/File

More information on the File object here: https://developer.mozilla.org/en-US/docs/Web/API/File

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

Here's a working example: http://jsfiddle.net/fmeLz9cd/

给定类型为文件的一个id fileSelected 输入，这里是通过文件访问性能的一个例子API：

Given an input of type file with an id fileSelected, here's an example of accessing the properties through the 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具体的例子，这里有同样的code在角应用工作：

Since you've requested an AngularJS specific example, here's the same code working in an angular app:

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

这篇关于得到与angularjs所选文件的源代码和名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！