# 文件选择器

文件选择器的用法与 button 类似，其继承于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

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

# 事件

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