primefaces - 带有额外下拉菜单的多文件上传

Question

我有一个要求，每个 select 上传的文件都应该包含一个下拉列表，以便从预定义的值中进行选择。我可以通过注入一段类似于 Multiple file upload with extra inputText 中的输入的代码来创建一个普通的 select。但我的要求是有一个 primefaces 一个菜单，一个像界面一样的下拉菜单，具有相同的外观和感觉（如 p:selectOneMenu 中）。预期结果类似于 bwloe 图像。 Required FileUpload Inteface with primefaces.

Answer 1

覆盖文件上传小部件的 PrimeFaces implementation 并修改每个文件的添加选项。

在行变量下添加以下行

.append('<div><select class="custom-select" name="title['+ file.name +']" style="width:180px;"></select></div>')

在此语句之后添加以下块以将 select 元素转换为 Prime-UI 下拉列表：

var themes = new Array('afterdark', 'afternoon', 'afterwork', 'vader'); 
$(row).find('.custom-select').puidropdown({
    filter: true,
    data: themes
});

所以 add 的整体实现看起来像：

add: function(e, data) {
            $this.chooseButton.removeClass('ui-state-hover ui-state-focus');

            if($this.fileAddIndex === 0) {
                $this.clearMessages();
            }

            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: PrimeFaces.escapeHTML(file.name),
                        filesize: file.size
                    });
                }
                else {
                    var row = $('<div class="ui-fileupload-row"></div>').append('<div class="ui-fileupload-preview"></td>')
                            .append('<div>' + PrimeFaces.escapeHTML(file.name) + '</div>')
                            .append('<div>' + $this.formatSize(file.size) + '</div>')
                            <b>.append('<div><select class="custom-select" name="title['+ file.name +']" style="width: 180px;"></select></div>')</b>
                            .append('<div class="ui-fileupload-progress"></div>')
                            .append('<div><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></div>')
                            .appendTo($this.filesTbody);

                            var themes = new Array('afterdark', 'afternoon', 'afterwork', 'vader');

                            $(row).find('.custom-select').puidropdown({
                                filter: true,
                                data: themes
                            });

                    if($this.filesTbody.children('.ui-fileupload-row').length > 1) {
                        $('<div class="ui-widget-content"></div>').prependTo(row);
                    }

                    //preview
                    if(window.File && window.FileReader && $this.IMAGE_TYPES.test(file.name)) {
                        var imageCanvas = $('<canvas></canvas>')
                                                .appendTo(row.children('div.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('div.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();
                    }
                }

                if($this.files.length > 0) {
                    $this.enableButton($this.uploadButton);
                    $this.enableButton($this.cancelButton);
                }

                $this.fileAddIndex++;
                if($this.fileAddIndex === (data.originalFiles.length)) {
                    $this.fileAddIndex = 0;
                }
            }
        }   

在 facelet 中包含必要的脚本：

<script type="text/javascript" src="x-tag-core.min.js"></script>
<script type="text/javascript" src="core.js"></script>
<script type="text/javascript" src="inputtext-element.js"></script>
<script type="text/javascript" src="inputtext.js"></script>
<script type="text/javascript" src="dropdown-element.js"></script>
<script type="text/javascript" src="dropdown.js"></script>

在 bean 中创建一个带有 uploadListener 的 primefaces fileUpload 组件：

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

现在修改 dropdown.js 中的样式以反映 primefaces 使用的默认样式，如下所示。

replace styles by name ui-dropdown by ui-selectonemenu

这会产生这样的结果 link final UI