浏览器拖拽上传,js 拖拽上传

　　拖拽批量上传文件夹

　　该组件基于Vue.js实现，UI框架为elementUI，完整的演示地址拖拽上传到https://github.com/Msxiaoma/upload-folder.的文件夹中(仅chrome支持)。

　　一、组件描述

　　同时拖拽多个文件夹，删除指定文件夹，显示当前文件夹的上传进度条。大于5M的文件夹上传效果如下：

　　二、遇到的问题

　　读取每个文件夹下的文件路径。如何显示当前上传文件夹的进度条？上传文件时跨域cookie文件夹碎片三、解决过程

　　1. 拖拽读取每个文件夹下面的文件路径

　　在拖放操作过程中，DataTransfer对象用于保存通过拖放操作拖动到浏览器的数据。它可以保存一个或多个数据，一个或多个数据类型。

　　//拖放文件夹drop folders(e){ e . stop propagation()e . prevent default()var items=e . data transfer . items for(var I=0；一.物品长度；I) {var item=items [I]。WebKitGetAsentry()if(item){ this . check folders(item)} }//确定是否是文件夹check folders(item){ if(item . is directory){ this。traversefiletree(item)} else { this。$ alert(仅支持上传文件夹， hint ，{ confirm buttontext: OK })} } traverseFileTree(item，path，parent dir){ path=path if(item . is file){ item . file((file)={ let obj={ file:file，path: path file.name，attr:item . attr } this . files list . push(obj)} } else if(item . is directory){ var dirReader=item . create reader()dirReader . reader entries((entries)={ for(entries一.条目长度；i ) {条目[i]。attr=item . attr this . traversefiletree(entries[I]，path item.name /，temp) } }，function(e){ console . log(e)} } }2. 上传文件夹的进度条

　　无碎片文件：根据文件夹中文件总数计算文件夹中每个文件的百分比，修改文件夹进程；当文件上传成功时；

　　碎片文件：在计算出每个文件在文件中的百分比后，计算每个文件在文件中的百分比。每个文件上传成功后，修改文件夹的过程。

　　3. 跨域携带 cookie

　　当服务器设置响应头时

　　Access-Control-Allow-Origin:必须指定与请求的网页一致的显式域名，不能是*。访问控制允许凭证：真

　　设置请求标题：

　　withCredentials:true

　　补充：

　　substring 和 substr 的区别

　　Substr(start [，length])从指定位置返回指定长度的子字符串。

　　开始：必需。所需子字符串的起始位置。字符串中第一个字符的索引为0。

　　长度：可选。返回的子字符串中应包含的字符数。

　　Substring返回string对象中指定位置的子字符串，以及从开始到结束(不包括结束)包含子字符串的字符串。

　　Start:表示子串的起始位置，索引从0开始。

　　End:表示子串的结束位置，索引从0开始。

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。