现要求能在浏览器上直接拖放一个文件夹实现批量上传
Html5规范还不支持
但是目前chrome >= 21 浏览器支持
现在文件的拖放上传采用的是
jquery-filedrop.js
https://github.com/weixiyen/jquery-filedrop
这个不支持文件夹
我把这个做了改进,可以支持文件夹。
原先代码:
function drop(e) { if( opts.drop.call(this, e) === false ) return false; files = e.dataTransfer.files; if (files === null || files === undefined || files.length === 0) { opts.error(errors[0]); return false; } files_count = files.length; upload(); e.preventDefault(); return false; }
改进如下:
function drop(e) { if( opts.drop.call(this, e) === false ) return false; function walkFileSystem(directory, callback, error) { if (!callback.pending) { callback.pending = 0; } if (!callback.files) { callback.files = []; } callback.pending++; var reader = directory.createReader(), relativePath = directory.fullPath.replace(/^\//, '').replace(/(.+?)\/?$/, '$1/'); reader.readEntries(function(entries) { callback.pending--; $.each(entries, function(index, entry) { if (entry.isFile) { callback.pending++; entry.file(function(File) { File.path = encodeURIComponent(relativePath); callback.files.push(File); if (--callback.pending === 0) { callback(callback.files); } }, error); } else { walkFileSystem(entry, callback, error); } }); if (callback.pending === 0) { callback(callback.files); } }, error); } var items = e.dataTransfer.items || [], firstEntry; if (items[0] && items[0].webkitGetAsEntry && (firstEntry = items[0].webkitGetAsEntry())) { // Experimental way of uploading entire folders (only supported by chrome >= 21) walkFileSystem(firstEntry.filesystem.root, function(allfiles) { files = allfiles; files_count = files.length; upload(); }, function() { // Fallback to old way when error happens files = e.dataTransfer.files; files_count = files.length; upload(); }); } else { files = e.dataTransfer.files; files_count = files.length; upload(); } e.preventDefault(); return false; }
以上改进点说明:
如果浏览器支持文件夹拖放,判断类型,如果是文件夹就递归读取文件夹目录树,
找到所有文件,最后在上传。
怎样做到按目录树保存文件呢?
其实递归读取文件夹时,我给文件赋值了path值,就是相对路径,
这样服务端就可以根据这个path,实现按目录树保存了。
其他地方的修改点就不一一列出了,附上修改后的完整代码。
相关推荐
一文讲清Python PyQt5的控件如何实现拖放获取文件路径 内部以QLineEdit为例子,从新类创建,代码理解,到融入项目均详细讲解。
请务必把debug里的skin替换到release,不知道怎么重新上传 如果编译不通过,须要修改下duilib的...实现OLE的文件/文件夹的拖放播放; 5.在播放屏幕和播放列表上分别添加右键菜单(各自只实现了一个示例,须自行扩展)。
该项目现已开始发展成为一个具有标签,最近页面,自动保存和拖放文件上传功能的不错的Wiki平台。 ##简单 Node-Wiki旨在为内容编辑者提供任何便利。 创建新页面和编辑现有页面的两个主要Wiki操作非常简单。 与...
下载 拖放和上传 描述 使用 HTML5 拖放 API,...然后使用键upload_dir在server/config.json配置上传目标文件夹。 之后,您需要通过 gulp 任务构建资产: gulp release 您可以通过以下方式启动应用程序: npm start
如果你能灵活应用DropIt处理文件的规则,还可以实现更丰富的智能整理文件和文件夹的方法。 正则表达式:可以通过编辑正则表达式,精确文件分类 拖放:处理文件和文件夹只需在目标拖放 过滤文件和文件夹:按名称,...
根据拖拽事件中获取文件列表,可用于实现文件上传,下载地址:dw.gofreeteam.com/DocSystem/web/project.html?vid=4&doc=2834
拖放:处理文件和文件夹只需在目标拖放 过滤文件和文件夹:按名称,目录,大小,日期,属性,内容或正则表达式 文件夹监控:处理文件和文件夹自动监测定义的目录 20操作:移动,复制,压缩,解压缩,重命名,删除,...
北雨下载系统 v1.0.1_bydown101.rar 是一个为计算机专业人士设计的 JSP (JavaServer Pages) 源码资料包,它提供了一个基于Web的应用程序,用于实现文件上传和下载的功能。这个系统通过其友好的用户界面和强大的后端...
SSL会话Choices-When设置SSL连接,一种上传软件允许您选择三种常见的SSL实现,包括TLS(AUTH TLS)*,SSL隐* *(直接连接在端口990)和SSL显式* *(身份验证SSL)模式。大多数FTP服务器支持至少一种,而一些(比如Globalscape ...
0629 鼠标拖放复制文本 391 0630 如何使用鼠标单击添加控件 392 0631 如何获得鼠标在窗体上的位置 392 0632 如何交换鼠标左右键功能 392 0633 如何隐藏和显示鼠标 393 0634 如何获取光标闪烁的频率 394 ...
配置、拖放、展示。让开发者能专注业务模块开发,减少开发时间。 跨平台兼容 兼容:IE8 、Firefox、Chrome、Safari、Opera。为实现最优体验,2.0开始不对IE6、7进行兼容,若使用IE6、7访问, 将会看到升级提示。 ...
1.C#获取当前程序所在的文件夹.rar 2.C#界面皮肤(带例子).rar 3.C#如何使用托盘控件的实例源码.rar 4.C#文本加密解密算法示例源代码.rar 5.C#在开机时自动启动程序.rar 6.C#自定义皮肤.rar 7.CS聊天程序.rar 8.WPF...
支持拖放,修改提示保存,多线程下载上传,多种视图模式,智能提交等多种特性。 http://www.ntko.com在线演示展示了NTKO 附件管理控件常用功能。该技术能让您更简单快速的将控件集成到您的产品中。 NTKO附件管理...
支持断点续传功能,支持被动模式传输,支持鼠标拖放操作,实现基本的上传下载功能,支持远程删除和创建文件夹,对多个站点的保存和管理,对临时站点的快速登陆,完善的操作记录,支持UNIX主机站点
另外,使用拖放操作来添加新的照片,或对其进行排序。创建文件夹以更好地组织您的相册。软件界面美观简洁、简单全面、实用方便,可快速上手,轻轻松松完成日常网络相册制作功能,真正做到简单全面实用。是用户实现...
每次打开Picasa时,它都会自动查找所有图片(甚至是那些您已经遗忘的图片),并将它们按日期顺序放在可见的相册中,同时以您易于识别的名称命名文件夹。您可以通过拖放操作来排列相册,还可以添加标签来创建新组。 ...
适用于C#初学者的几个小程序,可以加深对这门语言的理解 包括有以下内容: 1.C#获取当前程序所在的文件夹.rar 2.C#界面皮肤(带例子).rar 3.C#如何使用托盘控件的实例源码.rar 4.C#文本加密解密算法示例源代码.rar 5....
115 <br>0192 如何获取“我的文档”系统文件夹路径 115 <br>0193 如何获取应用程序当前执行的路径 116 <br>0194 如何获取当前操作系统的信息 116 <br>0195 如何实现基本数据类型随意转换 116...
此应用程序实现了拖放视频转码器,可让您通过在计算机上拖放媒体文件来轻松转换媒体文件。 它使用以下服务: AWS IAM 亚马逊S3 亚马逊SNS 亚马逊SQS 亚马逊弹性转码器 程序的一般流程可描述为: 确保AWS设置/...