标签：选项 select 字符 parameter maximum 例子 mil sage lap
--文件上传是一个支持拖放，多文件上传，自动上传，进度跟踪和验证的上传。
import {FileUploadModule} from ‘primeng/primeng‘;
文件上传需要一个URL属性为上传目标和一个名称来标识在后端的文件。
<p-fileUpload name="myfile[]" url="http://localhost:3000/upload"></p-fileUpload>
只有一个文件可以同时被选择，允许选择倍数启用多个选项
<p-fileUpload name="myfile[]" url="http://localhost:3000/upload" multiple="multiple"></p-fileUpload>
文件选择也可以通过拖放一个或多个到组件的内容部分来完成。
启用自动属性后，一旦文件选择完成或文件在下拉区域被拖放，上传将开始。
<p-fileUpload name="myfile[]" url="http://localhost:3000/upload" multiple="multiple"
accept="image/*" auto="auto"></p-fileUpload>
可选的文件类型可以接受属性限制，下面的例子只允许上传图片
<p-fileUpload name="myfile[]" url="http://localhost:3000/upload" multiple="multiple"
accept="image/*"></p-fileUpload>
最大文件大小可以限制使用MAXFILESIZE属性定义的字节数。
<p-fileUpload name="myfile[]" url="http://localhost:3000/upload" multiple="multiple"
accept="image/*" maxFileSize="1000000"></p-fileUpload>
为了自定义默认消息使用invalidfilesizemessagesummary和invalidfilesizemessagedetail选项。总之{ 0}占位符是指文件名和详细的文件大小。
文件列表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>
XHR请求上传文件可以定制使用onbeforeupload回调通过XHR实例和表单对象作为事件参数。
| 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. |
| 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. |
以下是结构式的类列表，对于主题类主题页面访问。
| Name | Element |
|---|---|
| ui-fileupload | Container element |
| ui-fileupload-buttonbar | Header containing the buttons |
| ui-fileupload-content | Content section |
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: ‘‘}); } }
<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>
https://www.primefaces.org/primeng/#/fileupload
标签：选项 select 字符 parameter maximum 例子 mil sage lap
原文地址：http://www.cnblogs.com/wdtzms/p/6765365.html
