如何在AngularJS中获取文件内容和其他详细信息？

我们可以通过使用一些基本的angular函数和其他细节(例如AngularJS中的文件名和大小)来获取文件内容。要了解它，请看下面的示例，其中同时实现了HTML和JS文件。

注意：请考虑以下两个文件在角度上具有相同的组成部分。

app.module.html：

  
 


   

    
        
         Submit
        
        
            Filename: {{ fileName }}
        
        
            File size: {{ fileSize }} Bytes
        
        
            File Content: {{ fileContent }}
        
    

输出：

在上面的HTML文件中，我们简单地构造了一个结构，使其在网页上应具有的外观。为此，我们使用了一些棱角分明的东西，例如“ ng-controller”和双花括号，这些将在下面的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) {
  
        // Intially 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";
            }
          }
       }
    }
});

输出：