Jsf 多文件上传，带有额外的inputText

我需要实施以下措施：

ajax风格的多文件上传（无需刷新整个页面）

每个文件的描述字段

这必须使用JSF2.0来完成

在任何组合中执行3个要求中的2个都没有问题。JSF2.0=PrimeFaces的Multiple fileUpload，JSF2.2的Multiple fileUpload+description是可能的，因为它有本机的upload元素（我想它可以是Ajax的，但没有检查它，因为我不能使用它），但是当我把这三个需求都放在一起时，我就卡住了。 PrimeFaces的

p:fileUpload

没有描述字段，其简单模式不支持ajax。 JSF2.0没有本机fileUpload组件。我可以将描述字段与PrimeFaces的

p:fileUpload

绑定，但我不能阻止用户选择多个文件，这会导致很少文件与一个描述绑定

---

那么，是否可以使用PrimeFaces和JSF 2.0中的description字段以ajax样式进行多文件上载？

PrimeFaces上载基于

调用

.serializeArray（）

时，该表单中的所有数据都将被序列化

在这种情况下，您可以覆盖

add

选项的PrimeFaces，为每个文件追加一个额外的输入文本

因此，结果如下所示：

现在这将是一行额外的代码，确切地说：

下面是

add

选项的完整实现（假设您的

widgetVar

是

fileUpload

）

$（文档）.ready（函数（）{
setTimeout（文件上传，1000）；
})
函数fileUpload（）{
PF（'fileUpload'）.jq.fileUpload({
添加：功能（e、数据）{
$this=PF（'fileUpload'）；
$this.chooseButton.removeClass（'ui-state-hover-ui-state-focus'）；
如果（$this.files.length==0）{
$this.enableButton（$this.uploadButton）；
$this.enableButton（$this.cancelButton）；
}
if（$this.cfg.fileLimit&&（$this.uploadedFileCount+$this.files.length+1）>$this.cfg.fileLimit）{
$this.clearMessages（）；
$this.showMessage({
摘要：$this.cfg.fileLimitMessage
});
返回；
}
var file=data.files？data.files[0]：空；
如果（文件）{
var validsg=$this.validate（文件）；
if（validsg）{
$this.showMessage({
总结：validMsg，
filename:file.name，
filesize:file.size
});
}
否则{
$this.clearMessages（）；
//我们要做的唯一修改
变量行=$（''）。追加（''）
.append（“”+file.name+“”）
.append（'标题：'）
.append（“”+$this.formatSize（file.size）+“”）
.append（“”）
.append（'ui-button'）
.appendTo（$this.filesTbody）；
if（$this.isCanvasSupported（）&&window.File&&window.FileReader&&$this.IMAGE\u TYPES.test（File.name））{
var imageCanvas=$（“你使用的是PrimeFaces 2.0？不，我只对JSF版本有限制。如果Primeface与JSF 2.0兼容，我可以使用任何Primeface。在我的例子中，我使用3.5，但考虑继续使用5.0，它是有效的！我对启动脚本有一些问题，但总的来说它是有效的！非常感谢！什么问题？当我在ove中使用它时，它不起作用。”rlay窗口，当我在主页上使用它时，它工作得非常好。我认为我需要编写js函数，在呈现覆盖时调用您的代码，在此之前它就是找不到这个小部件。您需要确保widgetVar已初始化并准备好使用，这是我在document.ready.I中使用setTimeout的主要原因想象一下，你的覆盖正在动态或部分呈现，在这种情况下，正如你所说的，你应该确保在正确的时间调用代码。
PF（'fileUpload'）
是组件的javascript对象，
jq
是jquery对象，
fileupload
是文件上传javascript插件对象……您应该看看javascript原型。@Anatoly
.append('<td class="title"><label>Title: <input name="title['+ file.name +']"></label></td>') //the only modification we have to do

public void handleFileUpload(FileUploadEvent event) {
    FacesContext context = FacesContext.getCurrentInstance();
    Map map = context.getExternalContext().getRequestParameterMap();
    String paramName = "title["+event.getFile().getFileName()+"]";
    String fileWithTitle = (String) map.get(paramName);            
}

$(document).ready(function() {
   setTimeout(fileUpload, 1000);
})

function fileUpload() {

PF('fileUpload').jq.fileupload({
    add: function(e, data) {
        $this = PF('fileUpload');
        $this.chooseButton.removeClass('ui-state-hover ui-state-focus');
        if ($this.files.length === 0) {
            $this.enableButton($this.uploadButton);
            $this.enableButton($this.cancelButton);
        }

        if ($this.cfg.fileLimit && ($this.uploadedFileCount + $this.files.length + 1) > $this.cfg.fileLimit) {
            $this.clearMessages();
            $this.showMessage({
                summary: $this.cfg.fileLimitMessage
            });

            return;
        }

        var file = data.files ? data.files[0] : null;
        if (file) {
            var validMsg = $this.validate(file);

            if (validMsg) {
                $this.showMessage({
                    summary: validMsg,
                    filename: file.name,
                    filesize: file.size
                });
            }
            else {
                $this.clearMessages();                                                                               
                //the only modification we have to do
                var row = $('<tr></tr>').append('<td class="ui-fileupload-preview"></td>')
                        .append('<td>' + file.name + '</td>')
                        .append('<td class="title"><label>Title: <input name="title['+ file.name +']"></label></td>') 
                        .append('<td>' + $this.formatSize(file.size) + '</td>')
                        .append('<td class="ui-fileupload-progress"></td>')
                        .append('<td><button class="ui-fileupload-cancel ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only"><span class="ui-button-icon-left ui-icon ui-icon ui-icon-close"></span><span class="ui-button-text">ui-button</span></button></td>')
                        .appendTo($this.filesTbody);

                
                if ($this.isCanvasSupported() && window.File && window.FileReader && $this.IMAGE_TYPES.test(file.name)) {
                    var imageCanvas = $('<canvas></canvas')
                            .appendTo(row.children('td.ui-fileupload-preview')),
                            context = imageCanvas.get(0).getContext('2d'),
                            winURL = window.URL || window.webkitURL,
                            url = winURL.createObjectURL(file),
                            img = new Image();

                    img.onload = function() {
                        var imgWidth = null, imgHeight = null, scale = 1;

                        if ($this.cfg.previewWidth > this.width) {
                            imgWidth = this.width;
                        }
                        else {
                            imgWidth = $this.cfg.previewWidth;
                            scale = $this.cfg.previewWidth / this.width;
                        }

                        var imgHeight = parseInt(this.height * scale);

                        imageCanvas.attr({width: imgWidth, height: imgHeight});
                        context.drawImage(img, 0, 0, imgWidth, imgHeight);
                    }

                    img.src = url;
                }

                //progress
                row.children('td.ui-fileupload-progress').append('<div class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="ui-progressbar-value ui-widget-header ui-corner-left" style="display: none; width: 0%;"></div></div>');

                file.row = row;

                file.row.data('filedata', data);
                $this.files.push(file);

                if ($this.cfg.auto) {
                    $this.upload();
                }
            }
        }
    }});
}