Angular PrimeNG FileUpload Типы файлов
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. Эта статья покажет нам, как использовать типы файлов FileUpload в Угловой PrimeNG.
Компонент FileUpload используется для ввода файлов от пользователя. Типы файлов FileUpload можно использовать для ограничения типа загружаемого файла. Он указывается с помощью свойства accept .
Свойства размера файла Angular PrimeNG FileUpload:
- имя: это имя параметра запроса, которое будет использоваться для идентификации файла на стороне сервера.
- URL-адрес: это удаленный URL-адрес для загрузки файла.
- accept: это свойство используется для определения типа файла, который может быть загружен с помощью ввода файла.
Синтаксис:
<p-fileUpload accept="type"></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, где мы устанавливаем свойство accept для изображений и принимаем только изображения.
- app.component.html
HTML
< h2 style = "color: green" >GeeksforGeeks</ h2 > < h4 >Angular PrimeNG FileUpload File Types</ h4 > < p-fileUpload mode = "basic" multiple = "multiple" accept = "image/*" > </ 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 { 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, FileUploadModule ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } |
Выход:
Пример 2: Ниже приведен еще один пример, демонстрирующий использование типов файлов Angular PrimeNG FileUpload, где мы принимаем только файлы в формате pdf, поэтому загрузка изображений приведет к ошибке.
- app.component.html
HTML
< h2 style = "color: green" >GeeksforGeeks</ h2 > < h4 >Angular PrimeNG FileUpload File Types</ h4 > < p-fileUpload multiple = "multiple" accept = ".pdf" > </ 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 { 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, FileUploadModule ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } |
Выход:
Ссылка: https://primefaces.org/primeng/fileupload