上传文件夹 vue

我们平时经常做的是上传文件，上传文件夹与上传文件类似，但也有一些不同之处，这次做了上传文件夹就记录下以备后用。此控件PC全平台支持包括mac,linux系统的文件上传，文章末尾将附上控件下载与教程链接   

首先我们需要了解的是上传文件三要素： 

1.表单提交方式:post (get方式提交有大小限制,post没有)

 2.表单的enctype属性:必须设置为multipart/form-data. 

3.表单必须有文件上传项:file，且文件项需要给定name值  

 上传文件夹需要增加一个属性webkitdirectory，

像这样： <input id="fileFolder" name="fileFolder" type="file"  webkitdirectory> 

工程截图

   

功能介绍   树形目录导航。您可以通过树型目录导航和路径导航栏快速跳转到指定目录。在跳转后树型目录将会自动选中当前的目录。

  

路径导航，点击根目录按钮便可返根目录

    

文件和目录重命名

 

点击删除按钮

   

点击确定后，页面中的文件消失      

 批量上传文件  

粘贴上传 复制文件夹、文件或图片

   

在页面中选择好相应的上传目录，点击粘贴上传按钮，数据即可快速开始上传

 

 批量上传文件和文件夹

    

文件和目录下载

  

批量下载 同时选择多个需要下载的文件 然后点击下载按钮，设置下载目录文件夹

  

      

点击全部下载，开始下载

    

自动加载未上传完的任务。在刷新浏览器或重启电脑后仍然可以自动加载未完成的任务。

    

下载完成后打开我们设置的下载目录文件夹，发现需下载的文件或文件夹确认已下载成功，经确认文件夹内的内容与下载文件夹内容一致

 

数据库记录，支持SQL、MySQL、Oracle 

Mac控件安装教程与演示说明：

http://t.cn/AijgiFgW

http://t.cn/Aijg6z08

Linux控件安装教程与演示说明：

http://t.cn/Aijg6Lv3

http://t.cn/Aijg64k6

控件包下载：

MacOS：http://t.cn/Aijg65dZ

Linux：http://t.cn/Aijg6fRV

cab(x86)：http://t.cn/Ai9pmG8S 

cab(x64)：http://t.cn/Ai9pm04B 

xpi：http://t.cn/Ai9pubUc 

crx：http://t.cn/Ai9pmrcy 

exe：http://t.cn/Ai9puobe   

示例下载： 

jsp-eclipse：http://t.cn/Ai9p3LSx 

jsp-myeclipse：http://t.cn/Ai9p3IdC    

在线教程： 

jsp-文件管理器教程：http://t.cn/AiNhmilv

个人博客：http://t.cn/AiY7heL0

www.webuploader.net

原文地址：https://www.cnblogs.com/songsu/p/11308149.html