使用额外的 inputText 上传多个文件

Question

我需要实现以下内容：

1. ajax方式多文件上传（不刷新整页）
2. 每个文件的描述字段
3. 必须使用 JSF 2.0 完成

任意组合完成 3 个要求中的 2 个都没有问题。使用 JSF 2.0 = PrimeFaces 的多个文件上传，使用 JSF 2.2 可以实现多个文件上传+描述，因为它具有本机上传元素（我猜它可以是 ajaxed 但没有检查它，因为我不能使用它），但是当我得到这三个要求加在一起我就卡住了。 PrimeFaces 的p:fileUpload 没有描述字段，其简单模式不支持ajax。 JSF 2.0 没有本机文件上传组件。我可以将描述字段与 PrimeFaces 的 p:fileUpload 绑定，但我无法阻止用户选择多个文件，这会导致很少的文件将绑定到一个描述。

那么，是否可以在 PrimeFaces 和 JSF 2.0 中使用描述字段以 ajax 样式上传多个文件？

Answer 1

PrimeFaces 上传基于blueimp/jQuery-File-Upload。

当.serializeArray() 被调用时，该表单内的所有数据都将被序列化。

在这种情况下，您可以覆盖 add 选项的 PrimeFaces implementation 以为每个文件附加一个额外的输入文本。

所以结果应该是这样的：

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

.append('<td class="title"><label>Title: <input name="title['+ file.name +']"></label></td>') //the only modification we have to do

额外的输入文本称为title[fileName]，在这种情况下，您将通过当前文件名获取请求参数的值。

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);            
}

这是add 选项的完整实现（假设您的widgetVar 是fileUpload）

$(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();
                }
            }
        }
    }});
}

只是将上面的代码包含在一些js文件中，并在</h:body>结束之前包含它

这是一个online Demo。

注意：如果用户选择了具有完全相同的名称和扩展名的多个文件，您可能会在此方法中遇到唯一的拖累。你会得到第一个标题两次！对于某些人来说这是可以的，因为用户不应该上传相同的文件。

这是在 PrimeFaces 5.0 和 Chrome 上进行的测试。