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

Question

我有一个PrimeFaces 8应用程序，我需要对其进行样式设计。其中一个需求是将自定义样式应用到用户界面上，当上传正在进行时，会在 p:fileUpload 组件使用 auto="true". 通过实际的上传来触发该UI将是非常费力的。有什么方法可以模拟上传正在进行中吗？我只是想让UI元素可见，以便应用自定义样式。

Answer 1

在 自动、高级（和非明确的单个或多个）展示。 以下

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

有所表现

我得到了 addFileToRow 来自 PrimeFaces文件上传javascript源码

你确实会收到以下错误信息

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

但我认为可以忽略... ...

你下次打电话的时候 ucfg.progress(...) 而在这之前，在小组件上设置一些 data 属性字段...

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%的进度条。现在，使用开发工具选择进度条元素，类名为 ui-progressbar-value 并将样式属性设置为 display: block; 和任何宽度。