dragger-upload

说明

拖拽上传插件

演示

源码

https://github.com/ddzy/ts-utility-plugins/tree/master/src/ddzy/business/upload/dragger-upload

配置

Name

Type

Description

Required

container

string

挂载到的 DOM 容器

false

onChangeHook

(e: Event) => void

文件发生改变时的钩子

false

onBeforeUploadHook

(file: File, fileList: File[]) => boolean | Promise

上传到服务器前执行的钩子

false

onUploadClickHook

(file: File, FileList: File[]) => boolean | Promise

上传至服务器按钮点击时的钩子

false

onPreviewClickHook

(file: File, fileList: File[]) => void

预览按钮点击时的钩子

false

onRemoveClickHook

(file: File, fileList: File[]) => void

从本地列表移除按钮点击时的钩子

false

onUploadClickSuccessHook

(file: File, fileList: File[]) => void

成功上传至服务器后的钩子

false

onUploadClickFailHook

(file: File, fileList: File[]) => void

上传至服务器失败时的钩子

false

总结

无法在ondrop内部直接使用e.dataTransfer.files获取文件列表

需要自定义数组, 再遍历一遍

ondrag和onclick无法共存, 导致无法追加自定义样式

只需监听 onmouseup, 并在其中自行调用label标签的click方法 - label.click()

最后更新于