js控制文件拖拽,获取拖拽内容
在用户拖拽文件到浏览器的某个元素上时,js可以监听到与拖拽相关的事件,并对拖拽结果进行处理,本文讨论下和拖拽文件相关的一些问题,不过没有处理太多关于兼容性的问题。
拖拽事件
js能够监听到拖拽的事件有drag、dragend、dragenter、dragexit(没有浏览器实现)、dragleave、dragover、dragstart、drop,详细的内容可以看MDN。
其中,与拖拽文件相关的事件有dragenter(文件拖拽进)、dragover(文件拖拽在悬浮)、dragleave(文件拖拽离开)、drop(文件拖拽放下)。
拖拽事件可以绑定到指定的DOM元素上,可以绑定到整个页面中。
var dropEle = document.querySelector( '#dropZone' );
dropEle.addEventListener( 'drop' , function (e) {
//
}, false );
document.addEventListener( 'drop' , function (e) {
//
}, false );
|
阻止默认行为
一般来说,我们只需要把处理拖拽文件的业务逻辑写到drop事件中就可以了,为什么还要绑定dragenter、dragover、dragleave这三个事件呢?
因为当你拖拽一个文件到没有对拖拽事件进行处理的浏览器中的时候,浏览器会打开这个文件,比如拖拽一张图片浏览器会打开这个图片,在没有PDF阅读器的时候也可以拖拽一个PDF到浏览器中,浏览器就会打开这个PDF文件。
如果浏览器打开了拖拽的文件,页面就跳走了,我们希望得到拖拽的文件,而不是让页面跳走。上面说到浏览器会打开拖拽的文件是浏览器的默认行为,我们需要阻止这个默认行为,就需要再上述的事件中进行阻止。
dropZone.addEventListener( "dragenter" , function (e) {
e.preventDefault();
e.stopPropagation();
}, false );
dropZone.addEventListener( "dragover" , function (e) {
e.preventDefault();
e.stopPropagation();
}, false );
dropZone.addEventListener( "dragleave" , function (e) {
e.preventDefault();
e.stopPropagation();
}, false );
dropZone.addEventListener( "drop" , function (e) {
e.preventDefault();
e.stopPropagation();
// 处理拖拽文件的逻辑
}
|
实际上dragenter不阻止默认行为也不会触发浏览器打开文件,为了防止某些浏览器可能有的兼容性问题,把拖拽周期中的所有的事件都阻止默认行为并且阻止了事件冒泡。
获得拖拽的文件
我们会在drop这个事件的回调中的事件对象能够得到文件对象。
在事件对象中,一个e.dataTransfer这样的属性,它是一个DataTransfer类型的数据,有如下的属性
属性 | 类型 | 说明 |
---|---|---|
dropEffect | String | 用来hack某些兼容性问题 |
effectAllowed | String | 暂时不用 |
files | FileList | 拖拽的文件列表 |
items | DataTransferItemList | 拖拽的数据(有可能是字符串) |
types | Array | 拖拽的数据类型 该属性在Safari下比较混乱 |
在Chrome中我们用items对象获得文件,其他浏览器用files获得文件,主要是为了处理拖拽文件夹的问题,最好不允许用户拖拽文件夹,因为文件夹内可能还有文件夹,递归上传文件会很久,如果不递归查找,只上传目录第一层级的文件,用户可能以为上传功能了,但是没有上传子目录文件,所以还是禁止上传文件夹比较好,后面我会说要怎么处理。
Chrome获取文件
dropZone.addEventListener( "drop" , function (e) {
e.preventDefault();
e.stopPropagation();
var df = e.dataTransfer;
var dropFiles = []; // 存放拖拽的文件对象
if (df.items !== undefined) {
// Chrome有items属性,对Chrome的单独处理
for ( var i = 0; i < df.items.length; i++) {
var item = df.items[i];
// 用webkitGetAsEntry禁止上传目录
if (item.kind === "file" && item.webkitGetAsEntry().isFile) {
var file = item.getAsFile();
dropFiles.push(file);
}
}
}
}
|
其他浏览器获取文件
这里只测试了Safari,其他浏览器并没有测试,不过看完本文一定也有思路处理其他浏览器的兼容情况。
dropZone.addEventListener( "drop" , function (e) {
e.preventDefault();
e.stopPropagation();
var df = e.dataTransfer;
var dropFiles = []; // 存放拖拽的文件对象
if (df.items !== undefined) {
// Chrome拖拽文件逻辑
} else {
for ( var i = 0; i < df.files.length; i++) {
dropFiles.push(df.files[i]);
}
}
}
|
由于Safari没有item,自然也没有webkitGetAsEntry,所以在Safari无法确定拖拽的是否是文件还是文件夹。
非Chrome内核浏览器判断目录的方法
浏览器获取到的每个file对象有四个属性:lastModified、name、size、type,其中type是文件的MIME Type,文件夹的type是空的,但是有些文件没有MIME Type,如果按照type是否为空判断是不是拖拽的文件夹的话,会误伤一部分文件,所以这个方法行。
那么还有什么方法可以判断呢,思路大概是这样子的,用户拖拽的文件和文件夹应该是不一样的东西,用File API操作的时候应该会有区别,比如进行某些操作的时候,文件就能够正常操作,但是文件夹就会报错,通过错误的捕获就能够判断是文件还是文件夹了,好我们根据这个思路来写一下。
dropZone.addEventListener( "drop" , function (e) {
e.preventDefault();
e.stopPropagation();
var df = e.dataTransfer;
var dropFiles = [];
if (df.items !== undefined){
// Chrome拖拽文件逻辑
} else {
for ( var i = 0; i < df.files.length; i++){
var dropFile = df.files[i];
if ( dropFile.type ) {
// 如果type不是空串,一定是文件
dropFiles.push(dropFile);
} else {
try {
var fileReader = new FileReader();
fileReader.readAsDataURL(dropFile.slice(0, 3));
fileReader.addEventListener( 'load' , function (e) {
console.log(e, 'load' );
dropFiles.push(dropFile);
}, false );
fileReader.addEventListener( 'error' , function (e) {
console.log(e, 'error,不可以上传文件夹' );
}, false );
} catch (e) {
console.log(e, 'catch error,不可以上传文件夹' );
}
}
}
}
}, false );
|
上面代码创建了一个FileReader实例,通过这个实例对文件进行读取,我测试读取一个1G多的文件要3S多,时间有点长,就用slice截取了前3个字符,为什么是前3个不是前2个或者前4个呢,因为代码是我写的,我开心这么写呗~
如果load事件触发了,就说明拖拽过来的东西是文件,如果error事件触发了,就说明是文件夹,为了防止其他可能的潜在错误,用try包起来这段代码。
三方应用的一点点小hack
经过测试发现通过Mac的Finder拖拽文件没有问题,但是有时候文件并不一定在Finder中,也可能在某些应用中,有一个应用叫做圈点,这个应用的用户反馈文件拖拽失效,去看了其他开源文件上传的源码,发现了这样一行代码:
dropZone.addEventListener( "dragover" , function (e) {
e.dataTransfer.dropEffect = 'copy' ; // 兼容某些三方应用,如圈点
e.preventDefault();
e.stopPropagation();
}, false );
|
需要把dropEffect置为copy,上网搜了下这个问题,源码文档中也没有说为什么要加这个,有兴趣的同学可以找一下为什么。
可以拿来就用的代码
由于用了FileReader去读取文件,这是一个异步IO操作,为了记录当前处理了多少个文件,以及什么时候触发拖拽结束的回调,写了一个checkDropFinish的方法一直去比较处理的文件数量和文件总数,确定所有文件处理完了后就去调用完成的回调。
另外,我在最后调试异步处理的时候,用的断点调试,发现断点调试在Safari中会导致异步回调不触发,需要自己调试定制功能的同学注意下。
// 获得拖拽文件的回调函数
function
getDropFileCallBack (dropFiles) {
console.log(dropFiles, dropFiles.length);
}
var
dropZone = document.querySelector(
"#dropZone"
);
dropZone.addEventListener(
"dragenter"
,
function
(e) {
e.preventDefault();
e.stopPropagation();
},
false
);
dropZone.addEventListener(
"dragover"
,
function
(e) {
e.dataTransfer.dropEffect =
'copy'
;
// 兼容某些三方应用,如圈点
e.preventDefault();
e.stopPropagation();
},
false
);
dropZone.addEventListener(
"dragleave"
,
function
(e) {
e.preventDefault();
e.stopPropagation();
},
false
);
dropZone.addEventListener(
"drop"
,
function
(e) {
e.preventDefault();
e.stopPropagation();
var
df = e.dataTransfer;
var
dropFiles = [];
// 拖拽的文件,会放到这里
var
dealFileCnt = 0;
// 读取文件是个异步的过程,需要记录处理了多少个文件了
var
allFileLen = df.files.length;
// 所有的文件的数量,给非Chrome浏览器使用的变量
// 检测是否已经把所有的文件都遍历过了
function
checkDropFinish () {
if
( dealFileCnt === allFileLen-1 ) {
getDropFileCallBack(dropFiles);
}
dealFileCnt++;
}
if
(df.items !== undefined){
// Chrome拖拽文件逻辑
for
(
var
i = 0; i < df.items.length; i++) {
var
item = df.items[i];
if
(item.kind ===
"file"
&& item.webkitGetAsEntry().isFile) {
var
file = item.getAsFile();
dropFiles.push(file);
console.log(file);
}
}
}
else
{
// 非Chrome拖拽文件逻辑
for
(
var
i = 0; i < allFileLen; i++) {
var
dropFile = df.files[i];
if
( dropFile.type ) {
dropFiles.push(dropFile);
checkDropFinish();
}
else
{
try
{
var
fileReader =
new
FileReader();
fileReader.readAsDataURL(dropFile.slice(0, 3));
fileReader.addEventListener(
'load'
,
function
(e) {
console.log(e,
'load'
);
dropFiles.push(dropFile);
checkDropFinish();
},
false
);
fileReader.addEventListener(
'error'
,
function
(e) {
console.log(e,
'error,不可以上传文件夹'
);
checkDropFinish();
},
false
);
}
catch
(e) {
console.log(e,
'catch error,不可以上传文件夹'
);
checkDropFinish();
}
}
}
}
},
false
);
js控制文件拖拽,获取拖拽内容相关推荐
- js控制文件拖拽,获取拖拽内容。
在用户拖拽文件到浏览器的某个元素上时,js可以监听到与拖拽相关的事件,并对拖拽结果进行处理,本文讨论下和拖拽文件相关的一些问题,不过没有处理太多关于兼容性的问题. 拖拽事件 js能够监听到拖拽的事件有 ...
- three.js 控制动画进度 进度条拖拽控制
2022-04-07 最新发现 之前的方案会因为拖拽过快 计算遗漏导致最后几帧的模型一直停留 解决方案也很让我难以接受只需要几行代码即可
- js根据文件后缀动态获取blob的type,并将流文件转blob
1.新建config 写入blobType的对象 export const blobType = {xls: 'application/vnd.ms-excel',xlsx: 'application ...
- 通过.js.map文件反编译 获取前端源码
通过 source map 还原源代码 npm 上有一些从 sourcemaps 反编译成 JavaScript 和 CSS 源码的库,如 reverse-sourcemap. 执行步骤 第一步:全局 ...
- js通过正则表达式解析xml 获取指定的内容
存在这样的xml: '<?xml version="1.0" encoding="UTF-8"?> <interface xmlns=&quo ...
- html js修改readonly,js控制html元素的readonly属性
html元素假设为只读,那么其readonly="readonly",我们现在想通过js来改变readonly属性为可以输入. 初始时,两个输入框都是只读.点击change按钮后, ...
- pdfjs 使用viewer 实现自动翻页(js控制)
pdfjs 使用viewer 实现自动翻页 使用js控制自动翻页 //获取嵌入在iframe中的子页面的window对象var childWindow = $("#myFrame" ...
- js如何上传大文件到服务器,js将文件上传到远程服务器
js将文件上传到远程服务器 内容精选 换一换 将文件上传至Windows云服务器一般会采用MSTSC远程桌面连接的方式.本节为您介绍本地Windows计算机通过远程桌面连接,上传文件至Windows云 ...
- nw.js FrameLess Window下的窗口拖拽与窗口大小控制
nw.js FrameLess Window下的窗口拖拽与窗口大小控制 很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...
最新文章
- 在Qt在GUI程序里显示控制台界面
- (四)JS学习笔记 - 模式 - 观察者模式
- SAP Customer Data Cloud(Gigya)登录的重定向问题
- mysql有子查询么_sql-带有子查询的mysql更新查询
- LeetCode 1745. 回文串分割 IV(区间DP)
- 电脑用电量_闲置电脑也能赚钱?「BOINC算力地球」借区块链技术扩大共享算力...
- mysql 分区表 限制_Mysql分区表使用的一些限制和需要注意的地方-阿里云开发者社区...
- Xposed框架指南
- 博士申请 | 美国北卡州立大学郭志山教授招收机器学习方向全奖博士生
- 2010年6月3日晚18点23分
- python从入门到入魔(肝3天总结的3万字经验)
- 第十二章:项目采购管理 - (12.1 规划采购管理)
- Android 图片文字识别DEMO(基于百度OCR)
- c语言程序执行不了,为什么C语言程序中if和else后的语句执行不了?
- 2019 年 Google 编程之夏活动报告
- PHP+JS+HTML 手机下拉加载分页
- 计算机里的扫雷游戏,电脑扫雷游戏怎么玩
- 简单SOPC实例开发任务——控制led灯闪烁
- android没有无线显示器,手机的无线显示器在哪?安卓手机在哪儿?
- python程序设计与基础教程第六章上机实验_《Python程序设计与算法基础教程》教学大纲.doc...