如何在AngularJS中获取文件内容和其他细节

我们可以通过使用一些基本的angular函数来获得文件内容，以及其他细节，如AngularJS中的文件名称和大小。为了理解它，请看下面的例子，其中HTML和JS文件都被实现了。

注：考虑到以下两个文件在angular中属于同一个组件。

app.module.html:

<!-- Script for display
data in particular format -->
 
<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
  </script>
<body ng-app="myApp">
    <div ng-controller="MyCtrl">
        <input type="file" id="myFileInput" />
        <button ng-click="submit()"> Submit</button>
        <br /><br />
        <h1>
            Filename: {{ fileName }}
        </h1>
        <h2>
            File size: {{ fileSize }} Bytes
        </h2>
        <h2>
            File Content: {{ fileContent }}
        </h2>
    </div>
</body>
</html>

输出:

在上面的HTML文件中，我们简单地做了一个结构，以确定它在网页上应该是什么样子。为此，我们使用了一些angular的东西，如 “ng控制器 “和双大括号，我们将在下面的javascript代码中实现。

app.module.ts:

import { BrowserModule } from
        '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from
        '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule }
        from '@angular/forms';
import { MatInputModule } from
        '@angular/material/input';
import { MatDialogModule } from
        '@angular/material/dialog';
import { MatFormFieldModule } from
        '@angular/material/form-field';
import { MatIconModule } from
        '@angular/material/icon';
 
@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        FormsModule,
        BrowserAnimationsModule,
        MatInputModule,
        MatFormFieldModule,
        MatIconModule,
        MatDialogModule,
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts:

// Code to get file content
// and other data
import { Component, OnInit } 
        from '@angular/core';
   
// Imports
import { FormGroup, FormControl,
          } from '@angular/forms';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
   
    constructor() { }
   
    ngOnInit() {
    }
 
    var myApp = angular.module('myApp', []);
 
    myApp.controller('MyCtrl', function ( $scope) { // Initially declaring empty string // and assigning size to zero$ scope.fileContent = '';
         $scope.fileSize = 0;$ scope.fileName = '';
 
        // Implementing submit function
 
         $scope.submit = function () { var file = document.getElementById("myFileInput") .files[0]; if(file) { var Reader = new FileReader(); Reader.readAsText(file, "UTF-8"); Reader.onload = function (evt) { // Getting required result // of the file$ scope.fileContent = Reader.result;
                     $scope.fileName = document.getElementById( "myFileInput").files[0].name;$ scope.fileSize = document.getElementById(
                                      "myFileInput").files[0].size;;
                }
 
       // Printing error if data
       //is not proper
 
            Reader.onerror = function (evt) {
                $scope.fileContent = "error";
            }
          }
       }
    }
});

输出:
如何在AngularJS中获取文件内容和其他细节