如何使用 p:fileUpload 模拟正在进行的上传

Question

我有一个需要设置样式的 PrimeFaces 8 应用程序。其中一项要求是将自定义样式应用于 UI，当使用 auto="true" 在 p:fileUpload 组件中进行上传时显示。通过实际上传来触发 UI 将非常费力。有没有办法模拟正在进行的上传？我只想让 UI 元素可见，以便应用自定义样式。

Answer 1

在Auto, Advanced (and non explicit single or multiple) showcase下面

var f = new File([""], "filename", { type: 'text/html' });
var data = new Object();
PF('widget_j_idt726_j_idt727').addFileToRow(f, data);

显示'something'

我从 PrimeFaces fileupload javascript source

得到了 addFileToRow

您确实收到以下错误

    TypeError: this.files[i].ajaxRequest.submit is not a function

不过我觉得可以忽略...

下次在小部件上调用 ucfg.progress(...) 时，在此之前设置一些 data properties/fields/...

data.files = [];
data.files[0] = f;
data.total = 100;
data.loaded = 10;

PF('widget_j_idt726_j_idt727').ucfg.progress(null, data);

显示

Answer 2

原来真的很简单。在设置样式时，使用 auto="false"。这将为您提供要上传的文件的预览，包括 0% 处的进度条。现在，使用开发工具 select 名称为 class 的进度条元素 ui-progressbar-value 并将样式属性设置为 display: block; 和任意宽度。

如何使用 p:fileUpload 模拟正在进行的上传

How to emulate an upload being in progress with p:fileUpload

jsf

primefaces