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()
最近更新 1yr ago