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

Question

我需要实现以下内容:

1. 以 ajax 方式上传多个文件(无需刷新整个页面)
2. 每个文件的描述字段
3. 必须使用 JSF 2.0 完成

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

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

Answer 1

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

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

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

所以结果看起来像这样:

现在那将是一行额外的代码，正好是 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 上进行的测试。