ckhesy / file-upload-demos Goto Github PK

在日常生活中，文件上传是一个很常见的功能，本项目阿宝哥演示了文件上传的八种场景：

• 单文件上传：利用 input 元素的 accept 属性限制上传文件的类型、利用 JS 检测文件的类型及使用 Koa 实现单文件上传的功能；

• 多文件上传：利用 input 元素的 multiple 属性支持选择多文件及使用 Koa 实现多文件上传的功能；

• 目录上传：利用 input 元素上的 webkitdirectory 属性支持目录上传的功能及使用 Koa 实现目录上传并按文件目录结构存放的功能；

• 压缩目录上传：在目录上传的基础上，利用 JSZip 实现压缩目录上传的功能；

• 拖拽上传：利用拖拽事件和 DataTransfer 对象实现拖拽上传的功能；

• 剪贴板上传：利用剪贴板事件和 Clipboard API 实现剪贴板上传的功能；

• 大文件分块上传：利用 Blob.slice 和第三方库 async-pool 实现大文件并发上传的功能；

• 服务端上传：利用第三方库 form-data 实现服务端文件流式上传的功能。

1、克隆项目

git clone https://github.com/semlinker/file-upload-demos.git

2、安装依赖

npm install

├── README.md #项目说明文档
├── big-file-upload # 大文件分块上传示例
├── clipboard-upload # 剪贴板上传示例
├── directory-compress-upload # 目录压缩上传示例
├── directory-upload # 目录上传示例
├── drag-drop-upload # 拖拽上传示例
├── multiple-file-upload # 多文件上传示例
├── server-upload # 服务端上传示例
└── single-file-upload # 单文件上传示例

npm run single

npm run mul

npm run dir

npm run compress

npm run drag

npm run clipboard

提示：测试剪贴板上传示例的时候，图片来源可以从网页上复制图片或从微信聊天框中复制图片。

npm run big

npm run server