PrimeNG之FileUpload
--文件上传是一个支持拖放,多文件上传,自动上传,进度跟踪和验证的上传。
Import
import {FileUploadModule} from 'primeng/primeng';
Getting Started
文件上传需要一个URL属性为上传目标和一个名称来标识在后端的文件。
<p-fileUpload name="myfile[]" url="http://localhost:3000/upload"></p-fileUpload>
Multiple Uploads
只有一个文件可以同时被选择,允许选择倍数启用多个选项
<p-fileUpload name="myfile[]" url="http://localhost:3000/upload" multiple="multiple"></p-fileUpload>
DragDrop
文件选择也可以通过拖放一个或多个到组件的内容部分来完成。
Auto Uploads
启用自动属性后,一旦文件选择完成或文件在下拉区域被拖放,上传将开始。
<p-fileUpload name="myfile[]" url="http://localhost:3000/upload" multiple="multiple"
accept="image/*" auto="auto"></p-fileUpload>
File Types
可选的文件类型可以接受属性限制,下面的例子只允许上传图片
<p-fileUpload name="myfile[]" url="http://localhost:3000/upload" multiple="multiple"
accept="image/*"></p-fileUpload>
File Size
最大文件大小可以限制使用MAXFILESIZE属性定义的字节数。
<p-fileUpload name="myfile[]" url="http://localhost:3000/upload" multiple="multiple"
accept="image/*" maxFileSize="1000000"></p-fileUpload>
为了自定义默认消息使用invalidfilesizemessagesummary和invalidfilesizemessagedetail选项。总之{ 0}占位符是指文件名和详细的文件大小。
- invalidFileSizeMessageSummary: '{0}: Invalid file size, ' --(“{ 0 }:无效的文件大小,”)
- invalidFileSizeMessageDetail: string = 'maximum upload size is {0}.' --(字符串的最大上传大小是{ 0 })
Templating
文件列表UI是可定制的使用ng-template称为“file”,得到的文件实例作为隐式变量。命名为“内容”的第二个NG模板可用于将自定义内容放置在内容节中,这将有助于实现用户界面管理上传的文件,例如删除它们。第三和最后NG模板选项是“toolbar”,以显示自定义内容工具栏。
<p-fileUpload name="myfile[]" url="http://localhost:3000/upload" multiple="multiple"
accept="image/*" maxFileSize="1000000">
<ng-template pTemplate="toolbar">
<div>Upload 3 Files</div>
</ng-template>
<ng-template let-file pTemplate="file">
<div>Custom UI to display a file</div>
</ng-template>
<ng-template pTemplate="content">
<div>Custom UI to manage uploaded files</div>
</ng-template>
</p-fileUpload>
Request Customization
XHR请求上传文件可以定制使用onbeforeupload回调通过XHR实例和表单对象作为事件参数。
Attributes
Name | Type | Default | Description |
---|---|---|---|
name | string | null | Name of the request parameter to identify the files at backend. |
url | string | null | Remote url to upload the files. |
multiple | boolean | false | Used to select multiple files at once from file dialog. |
accept | string | false | Pattern to restrict the allowed file types such as "image/*". |
disabled | boolean | false | Disables the upload functionality. |
auto | boolean | false | When enabled, upload begins automatically after selection is completed. |
maxFileSize | number | null | Maximum file size allowed in bytes. |
invalidFileSizeMessageSummary | string | "{0}: Invalid file size, " | Summary message of the invalid fize size. |
invalidFileSizeMessageDetail | string | "maximum upload size is {0}." | Detail message of the invalid fize size. |
invalidFileTypeMessageSummary | string | "{0}: Invalid file type, " | Summary message of the invalid fize type. |
invalidFileTypeMessageDetail | string | "allowed file types: {0}." | Detail message of the invalid fize type. |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
previewWidth | number | 50 | Width of the image thumbnail in pixels. |
chooseLabel | string | Choose | Label of the choose button. |
uploadLabel | string | Upload | Label of the upload button. |
cancelLabel | string | Cancel | Label of the cancel button. |
Events
Name | Parameters | Description |
---|---|---|
onBeforeUpload | event.xhr: XmlHttpRequest instance. event.formData: FormData object. |
Callback to invoke before file upload begins to customize the request such as post parameters before the files. |
onBeforeSend | event.xhr: XmlHttpRequest instance. event.formData: FormData object. |
Callback to invoke before file send begins to customize the request such as adding headers. |
onUpload | event.xhr: XmlHttpRequest instance. event.files: Uploaded files. |
Callback to invoke when file upload is complete. |
onError | event.xhr: XmlHttpRequest instance. event.files: Files that are not uploaded. |
Callback to invoke if file upload fails. |
onClear | -. | Callback to invoke when files in queue are removed without uploading. |
onSelect | event.originalEvent: Original browser event. event.files: List of selected files. |
Callback to invoke when file upload is complete. |
Styling
以下是结构式的类列表,对于主题类主题页面访问。
Name | Element |
---|---|
ui-fileupload | Container element |
ui-fileupload-buttonbar | Header containing the buttons |
ui-fileupload-content | Content section |
demo code
export class FileUploadDemo { msgs: Message[]; uploadedFiles: any[] = []; onUpload(event) {
for(let file of event.files) {
this.uploadedFiles.push(file);
} this.msgs = [];
this.msgs.push({severity: 'info', summary: 'File Uploaded', detail: ''});
}
}
FileUploadDemo.ts
<p-growl [value]="msgs"></p-growl> <p-fileUpload name="demo[]" url="http://localhost:3000/upload" (onUpload)="onUpload($event)"
multiple="multiple" accept="image/*" maxFileSize="1000000">
<ng-template pTemplate type="content">
<ul *ngIf="uploadedFiles.length">
<li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
</ul>
</ng-template>
</p-fileUpload>
FileUploadDemo .html
参考资料
https://www.primefaces.org/primeng/#/fileupload
PrimeNG之FileUpload的更多相关文章
- .JavaWeb文件上传和FileUpload组件使用
.JavaWeb文件上传 1.自定义上传 文件上传时的表单设计要符合文件提交的方式: 1.提交方式:post 2.表单中有文件上传的表单项:<input type="file" ...
- C#-WebForm-文件上传-FileUpload控件
FileUpload - 选择文件,不能执行上传功能,通过点击按钮实现上传 默认选择类型为所有类型 //<上传>按钮 void Button1_Click(object sender, E ...
- FileUpload组件
package com.itheima.servlet; import java.io.File; import java.io.FileOutputStream; import java.io.IO ...
- 如何实现修改FileUpload样式
这里先隐藏FileUpload 然后用一个input button和一个text来模拟FileUpload 具体代码为 <asp:FileUpload ID="FileUpload1& ...
- 上传文件fileupload
文件上传: 需要使用控件-fileupload 1.如何判断是否选中文件? FileUpload.FileName - 选中文件的文件名,如果长度不大于0,那么说明没选中任何文件 js - f.va ...
- fileupload图片预览功能
FileUpload上传图片前首先预览一下 看看效果: 在专案中,创建aspx页面,拉上FileUpload控件一个Image,将用来预览上传时的图片. <%@ Page Language=&q ...
- textbox button 模拟fileupload
方案一: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.asp ...
- FileUpload 上传文件,并实现c#使用Renci.SshNet.dll实现SFTP文件传输
fileupload上传文件和jquery的uplodify控件使用方法类似,对服务器控件不是很熟悉,记录一下. 主要是记录新接触的sftp文件上传.服务器环境下使用freesshd搭建好环境后,wi ...
- C# 自定义FileUpload控件
摘要:ASP.NET自带的FileUpload控件会随着浏览器的不同,显示的样式也会发生改变,很不美观,为了提高用户体验度,所以我们会去自定义FileUpload控件 实现思路:用两个Button和T ...
随机推荐
- 单片机成长之路(51基础篇) - 008 C51 的标示符和关键字
标准 C 语言定义了 32 个关键字,如下表(ANSI C的32个关键字): C51在此基础上针对单片机功能进行了扩展,详情见下表(C51编译器扩充关键字): C 51的数据类型 51单片机使用的C语 ...
- pandas.Dataframe复杂条件过滤
https://stackoverflow.com/questions/11418192/pandas-complex-filter-on-rows-of-dataframe mask = df.ap ...
- 【资料下载区】【iCore系列及其它模块相关文档】更新日期2017/07/24
iCore系列双核心板原理图下载区 iCore双核心板原理图下载(注释版)iCore1s双核心板原理图下载iCore2双核心板原理图下载iCore3双核心板原理图下载iCore4双核心板原理图下载 i ...
- NaviSoft31.源码开发完成
NaviSoft是作者一人开发完成,从之前的1.0版本,到现在的3.1版本.历经2年时间,开发完成 下面是NaviSoft的源码结构 加QQ群了解更多信息
- 使用SecureCRT / win7远程桌面连接ubuntu配置记录(有更新)
2017-03-03 更新于末尾 1.Windows7 — Ubuntu 远程桌面连接中 Tab 键不能补全的解决办法 2.xrdp远程连接ubuntu无法使用原机的中文输入法 2017-02-22 ...
- 关于azkaban上传job压缩包报错问题的解决方案
在azkaban上传job压缩包如果出现 installation Failed Error Chunking during uploading files to db.. 错误,可通过如下方法解决. ...
- 自己动手在win2003系统中添加虚拟网卡
运用虚拟网卡我们可以更好地使用我们的网络,那么在win2003中该怎么操作呢?下面就为大家介绍下具体的步骤 虚拟网卡是用软件来实现虚拟的网卡,通过运用虚拟网卡我们可以更好地使用我们的网络.但是虚拟 ...
- Houdini技术体系 基础管线(三) :UE4以选择区域的方式对地形做生成和更新 上篇
背景 前一节里,解决了Houdini地形无缝导入到UE4的流程问题.但这种方法也有它的局限性,在实际游戏项目里,LA和LD还是偏向在游戏引擎编辑器里工作,他们的一些设计也会影响到地形的信息,那 ...
- tomcat 配置 使用综合
[参考]Tomcat 7.0安装与配置 [参考]tomcat 控制台日志(startup.bat)输出到指定文件中 [参考]将Java web应用部署到Tomcat 及部署到Tomcat根目录 的三种 ...
- laravel5.8笔记七:语言包
语言包控制config/app.php 'locale' => 'en', 语言包位置:resources/lang/cn/ 建立resources/lang/cn/common.php < ...