Angular PrimeNG FileUpload Размер файла
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. Эта статья покажет нам, как использовать размер файла FileUpload в Angular PrimeNG.
Компонент FileUpload используется для ввода файлов от пользователя. Размер файла FileUpload можно использовать для ограничения максимального размера загружаемого файла. Он указывается с помощью свойства maxFileSize .
Свойства размера файла Angular PrimeNG FileUpload:
- имя: это имя параметра запроса, которое будет использоваться для идентификации файла на стороне сервера.
- URL-адрес: это удаленный URL-адрес для загрузки файла.
- maxFileSize: это свойство используется для определения максимального размера файла в байтах, который может быть загружен с помощью ввода файла.
Синтаксис:
<p-fileUpload maxFileSize="size"></p-fileUpload>
Создание приложения Angular и установка модуля:
Шаг 1: Создайте приложение Angular, используя следующую команду.
ng new appname
Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.
cd appname
Шаг 3: Установите PrimeNG в указанный вами каталог.
npm install primeng --save npm install primeicons --save
Структура проекта: Это будет выглядеть следующим образом:
Пример 1: Ниже приведен простой пример, демонстрирующий использование размера файла Angular PrimeNG FileUpload. В этом примере мы устанавливаем maxFileSize равным 1 байту.
- приложение.component.html:
HTML
<h2 style="color: green">GeeksforGeeks</h2><h4>Angular PrimeNG FileUpload File Size</h4> <p-fileUpload [maxFileSize]="1" mode="basic" chooseLabel="Upload"></p-fileUpload> |
- app.component.ts:
Javascript
import { Component } from "@angular/core"; @Component({ selector: "app-root", templateUrl: "./app.component.html",})export class AppComponent { } |
- app.module.ts:
Javascript
import { NgModule } from "@angular/core";import { BrowserModule } from "@angular/platform-browser";import { HttpClientModule } from "@angular/common/http";import { BrowserAnimationsModule } from "@angular/platform-browser/animations";import { FileUploadModule } from "primeng/fileupload";import { AppComponent } from "./app.component";import { ButtonModule } from "primeng/button"; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, ButtonModule, HttpClientModule, FileUploadModule ], declarations: [AppComponent], bootstrap: [AppComponent],})export class AppModule { } |
Выход:
Пример 2: Ниже приведен еще один пример, демонстрирующий использование размера файла Angular PrimeNG FileUpload. Здесь максимальный размер загружаемого файла установлен на 1 МБ, поэтому можно загружать файлы размером менее 1 МБ.
- приложение.component.html:
HTML
<h2 style="color: green">GeeksforGeeks</h2><h4>Angular PrimeNG FileUpload File Size</h4> <p-fileUpload [maxFileSize]="1000000" [multiple]="true"></p-fileUpload> |
- app.component.ts:
Javascript
import { Component } from "@angular/core"; @Component({ selector: "app-root", templateUrl: "./app.component.html",})export class AppComponent { } |
- app.module.ts:
Javascript
import { NgModule } from "@angular/core";import { BrowserModule } from "@angular/platform-browser";import { HttpClientModule } from "@angular/common/http";import { BrowserAnimationsModule } from "@angular/platform-browser/animations";import { FileUploadModule } from "primeng/fileupload";import { AppComponent } from "./app.component";import { ButtonModule } from "primeng/button"; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, ButtonModule, HttpClientModule, FileUploadModule ], declarations: [AppComponent], bootstrap: [AppComponent],})export class AppModule { } |
Выход :
Ссылка: https://primefaces.org/primeng/fileupload