文件选择器电子 - Javascript

简介

文件选择器电子是一个基于Javascript的UI组件，可以方便地在网页上添加文件选择器。

特性

• 支持多文件选择
• 自定义文件类型过滤
• 支持拖放上传
• 显示上传进度
• 可以自定义UI样式

快速开始

1. 引入文件选择器电子的css和js文件：

<link rel="stylesheet" href="path/to/file-selector.css" />
<script src="path/to/file-selector.js"></script>

2. 在你的网页中添加一个文件选择器的DOM元素：

<div id="file-selector"></div>

3. 创建一个文件选择器实例：

var fileSelector = new FileSelector(document.getElementById('file-selector'));

4. 给文件选择器添加事件监听：

fileSelector.on('change', function(files) {
  // 处理选择的文件
});

API文档

方法

new FileSelector(element, [options])

创建一个文件选择器实例。

参数

• element：要添加文件选择器的DOM元素
• options：可选参数，一个对象，包含以下选项：
  • multiple：是否允许选择多个文件，默认为 true；
  • accept：要接受的文件类型，可以是字符串或数组，默认为 []；
  • drag：是否允许拖拽上传，默认为 true；
  • url：上传文件的URL，如果为空则使用默认值 /upload；
  • fieldName：上传文件的字段名称，默认为 file；
  • method：上传文件的HTTP方法，可以是 POST 或者 PUT，默认为 POST；
  • headers：上传文件的HTTP头部；
  • withCredentials：是否发送跨域凭证，默认为 false；
  • classes：自定义UI样式的类名。

示例

var fileSelector = new FileSelector(document.getElementById('file-selector'), {
  multiple: true,
  accept: ['.jpg', '.jpeg', '.png'],
  drag: true,
  url: '/api/upload',
  fieldName: 'file',
  method: 'POST',
  headers: {
    'Authorization': 'Bearer ' + token
  },
  withCredentials: true,
  classes: {
    root: 'file-selector',
    input: 'file-selector__input',
    button: 'file-selector__button',
    label: 'file-selector__label',
    preview: 'file-selector__preview',
    progress: 'file-selector__progress'
  }
});

.on(eventName, handler)

添加事件监听。

参数

• eventName：事件名称，可以是 change、upload、success、error、progress；
• handler：事件处理函数。

示例

fileSelector.on('success', function(response) {
  console.log(response);
});

.off(eventName, handler)

移除事件监听。

参数

• eventName：事件名称；
• handler：要移除的事件处理函数，如果省略，则移除所有该事件的监听函数。

示例

fileSelector.off('success');

.clear()

清除选择的文件。

示例

fileSelector.clear();

.destroy()

销毁文件选择器实例。

示例

fileSelector.destroy();

事件

change

当用户选择文件时触发该事件。

示例

fileSelector.on('change', function(files) {
  console.log(files);
});

upload

当文件开始上传时触发该事件。

示例

fileSelector.on('upload', function(file) {
  console.log(file);
});

success

当文件上传成功时触发该事件。

示例

fileSelector.on('success', function(response) {
  console.log(response);
});

progress

当文件上传进度发生变化时触发该事件。

示例

fileSelector.on('progress', function(progress) {
  console.log(progress);
});

error

当文件上传失败时触发该事件。

示例

fileSelector.on('error', function(error) {
  console.log(error);
});

结语

文件选择器电子是一个功能简单、易于使用的文件上传组件，适用于大部分网页应用场景。如果你需要更复杂的上传功能，可以考虑使用其他更专业的上传组件。