# # 文件选择器

文件选择器的用法与 xbutton 类似，其继承于 XbuttonComponent，并且支持 `accept` 属性和 `change` 事件。

## # 代码示例

    <html>
        <template id="layout-template">
            <webpdf>
                <div class="file-selector-container">
                    <!-- accepts all type of files -->
                    <file-selector accept="*.*">Select all type of file</file-selector>
                    <!-- accepts PDF files -->
                    <file-selector accept=".pdf">Select PDF</file-selector>
                    <!-- accepts image files -->
                    <file-selector accept=".png;.jpg;.bmp" @controller="custom:SelectSingleFileController">Select Image</file-selector>
                    <!-- select multiple files -->
                    <file-selector @controller="custom:SelectMultipleFileController" accept="image/*" multiple>Select multiple files</file-selector>
                    <!-- use in dropdown -->
                    <dropdown style="width: auto" text="dropdown with file selector" separate="false">
                        <file-selector accept=".xfdf;.fdf" text="import FDF/XFDF" icon-class="fv__icon-sidebar-import-comment"></file-selector>
                    </dropdown>
                </div>
                <div class="fv__ui-body">
                    <viewer></viewer>
                </div>
            </webpdf>
        </template>
    </html>
    <style>
        .file-selector-container {
            display: flex;
            flex-wrap: wrap;
        }
        .file-selector-container > .fv__ui-fileselector {
            flex: 1 1 auto;
        }
    </style>
    <script>
        UIExtension.PDFUI.module('custom', [])
            .controller('SelectSingleFileController', {
                handle: function(file) {
                    alert('Selected file: ' + file.name);
                }
            })
            .controller('SelectMultipleFileController', {
                handle: function(files) {
                    alert('Selected files: \r\n' + files.map(it => it.name));
                }
            })
        var CustomAppearance = UIExtension.appearances.Appearance.extend({
            getLayoutTemplate: function() {
                return document.getElementById('layout-template').innerHTML;
            },
            disableAll: function(){}
        });
        var libPath = window.top.location.origin + '/lib';
        var pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: document.body,
                appearance: CustomAppearance,
                addons: []
        });
    </script>

## # API

有关更详细信息，请查阅 xbutton 。

## # 事件

名称 | 描述 | 示例 | 版本
--- | --- | --- | ---
change | 单击并选择文件后触发，如果开启多选，则事件回调的 file 参数是一个数组，否则是一个 File 实例 | `fileSelector.on('change', (file) => { if(Array.isArray(file)) {} else {} })` | 7.4