Angular PrimeNG FileUpload Автоматическая загрузка
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы увидим, как использовать автоматическую загрузку FileUpload в Angular PrimeNG.
Angular PrimeNG FileUpload Auto Uploads используются для включения автоматической загрузки, т. е. загрузка файла начинается, как только выбор файла завершен или файл помещается в область перетаскивания, когда включено свойство auto.
Синтаксис:
<p-fileUpload name="..." url="..." [auto]="true"> </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.
- app.component.html
HTML
< h2 style = "color: green" > GeeksforGeeks </ h2 > < h4 > Angular PrimeNG FileUpload Auto Uploads </ h4 > < p-fileUpload name = "myfile[]" url = "./upload.php" [auto]="true"> </ p-fileUpload > |
- app.component.ts
Javascript
import { Component, OnInit } from "@angular/core" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , providers: [], }) export class AppComponent { constructor() { } ngOnInit() { } } |
- 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 { HttpClientModule } from "@angular/common/http" ; import { ButtonModule } from "primeng/button" ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, ButtonModule, HttpClientModule, FileUploadModule, ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } |
Выход:
Пример 2: Ниже приведен еще один пример, демонстрирующий использование автоматической загрузки Angular PrimeNG FileUpload, где мы используем несколько автоматических загрузок.
- app.component.html
HTML
< h2 style = "color: green" > GeeksforGeeks </ h2 > < h4 > Angular PrimeNG FileUpload Auto Uploads </ h4 > < p-fileUpload name = "myfile[]" url = "./upload.php" multiple = "multiple" [auto]="true" chooseLabel = "Choose" > </ p-fileUpload > |
- app.component.ts
Javascript
import { Component, OnInit } from "@angular/core" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , providers: [], }) export class AppComponent { constructor() { } ngOnInit() { } } |
- 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 { HttpClientModule } from "@angular/common/http" ; import { ButtonModule } from "primeng/button" ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, ButtonModule, HttpClientModule, FileUploadModule, ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } |
Выход:
Ссылка: https://primefaces.org/primeng/fileupload