# 文件选择器
文件选择器的用法与 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 |