Podemos obtener el contenido del archivo usando algunas funciones angulares básicas y otros detalles como el nombre y el tamaño del archivo en AngularJS. Para entenderlo, mire el siguiente ejemplo donde se implementan los archivos HTML y JS.
Nota: Considere a continuación que dos archivos son del mismo componente en angular.
aplicación.módulo.html:
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>
Producción:
En el archivo HTML anterior, simplemente hemos creado una estructura de cómo debe verse en la página web. Para eso, hemos usado algunas cosas angulares como ‘ng-controller’ y también corchetes doblemente rizados que implementaremos en el siguiente código javascript.
aplicación.módulo.ts:
javascript
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 { }
aplicación.componente.ts:
javascript
// 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";
}
}
}
}
});
Producción:
Publicación traducida automáticamente
Artículo escrito por dadimadhav y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA