H5新增了drag事件,在H5中拖拽是十分常见的。

可以拖拽的分为页面内的和页面外的

页面内的一般默认可以拖拽的是img和a标签

页面外的常指的是文件

上代码吧~

let zoom = document.getElementById('drag_zoom');
zoom.addEventListener('dragenter',_=>{
zoom.innerHTML = '释放鼠标~~';
},false)
zoom.addEventListener('dragleave',_=>{
zoom.innerHTML = '请把文件拖到这里~~';
},false)
zoom.addEventListener('dragover',ev=>{
ev.preventDefault();
},false)
zoom.addEventListener('drop',ev=>{
console.log(ev.dataTransfer.files);
zoom.innerHTML = '请把文件拖到这里~~';
ev.preventDefault();
},false)

特别的是,dragover和drop都需要把浏览器的默认事件去除,其中一个没有去除都会导致浏览器直接读取该文件,而导致离开本页面

如果拖拽进来的是文件的话,ev.dataTransfer.files可以读取到拖拽进来文件的一些信息。

dataTransfer.files的结构如下:

可以看出,我们可以初步获取文件的name、type、size、lastModified这些属性

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

配合FileReader读取文件,用法直接上代码

let fr = new FileReader();
fr.onload = function(){
console.log(this.result);
}
fr.onerror = function(){
alert('失败了~~');
} div.addEventListener('drop',ev=>{
fr.readAsText(ev.dataTransfer.files[0]);
fr.readAsDataURL(ev.dataTransfer.files[0]);
fr.readAsArrayBuffer(ev.dataTransfer.files[0]);
fr.readAsBinaryString(ev.dataTransfer.files[0]);
},false)

值得注意的是:

1.FileReader读出文件比较特殊的是,回来data的不是onload的回调参数,而是FileReader实例本身的result属性

2.FileReader实例有4种读取文件的方式:

  1) readAsText 以文本方式读取 (多用于读取文本文件)

  2) readAsDataURL 以base64方式读取 (多用于读取图片)

  3) readAsArrayBuffer 以二进制的方式读取(不常用,js难以操作这种数据类型)

  4) readAsBinaryString 以二进制字符串的方式读取 (多用于上传数据)

H5新特性之拖拽文件的更多相关文章

  1. H5新特性汇总

    H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...

  2. 解决Duilib集成CEF浏览器在Win10无法向客户区拖拽文件

    在Duilib中集成CEF浏览器项目实际开发中,遇到一个问题. 一个需求从资源管理器(桌面)拖拽文件到客户端,窗口捕获WM_DROPFILES消息然后进行消息处理,但客户区是集成的CEF浏览器,浏览器 ...

  3. window响应拖拽文件操作

    window响应拖拽文件操作 1.首先调用DragAcceptFiles,让控件或者窗体支持文件拖动操作函数功能:用来为拖放文件作初始化.函数原型: void DragAcceptFiles( HWN ...

  4. H5新特性--WebStorage--WebSocke

    今天的目标 3.2:h5新特性--WebStorage localStorage  在客户端浏览器保存数据 永久保存 保存数据 localStorage [key] = value 保存数据 loca ...

  5. H5新特性---Web Worker---Web Stroage

    今天的目标 3.1:h5新特性八--Web Worker---代码就3行 程序:program 存储在外存(磁盘)中代码 进程:Process/Task 将程序调用内存中,分配空间 线程:Thread ...

  6. H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位

    今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry=""  cx="" cy="" ...

  7. H5新特性——--第三方绘图工具库 echarts(canvas)---SVG绘图

    今天学习的内容 3.1:h5新特性---第三方绘图工具库 echarts(canvas) 百度 echarts;d3;two.js;.... 3.2:h5新特性---SVG绘图 3.2:h5新特性-- ...

  8. H5新特性-视频,音频-Flash-canvas绘图

    json格式 json - > AJAX json:数据格式,通常是以字符串形式表示 对象 {"name":"james","age" ...

  9. Unity输出PC端(Windows) 拖拽文件到app中

    需求:给策划们写一个PC端(Window)的Excel导表工具.本来用OpenFile打开FileExplorerDialog后让他们自己选择想要添加的Excel文件就行了,结果有个需求是希望能拖拽E ...

随机推荐

  1. linux 第七周 总结及实验

    姬梦馨 原创作品 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 第七周 Linux内核如何装载和启动一 ...

  2. The Contest CodeForces - 813A (思维)

    Pasha is participating in a contest on one well-known website. This time he wants to win the contest ...

  3. 软件工程-pair work[附加题]

    首先,在分组之前,我和室友周敏轩已经详细阅读了往届学长的博客,认为电梯调度这个项目应该先做UI会比较好一点,于是动手展开了UI的编写;但分组结果并没有如我们所愿,但我们依然共同进行了UI的编写,希望在 ...

  4. 无符号整型 unsigned int、unsigned long、usigned long long、size_t 比较和格式控制

    位数比较 由于数据的长度和平台相关,所以基于 64 位系统比较. Windows Linux unsigned int 32 bits/4294967295 32 bits unsigned long ...

  5. Laravel Exception处理逻辑解析

    Laravel Exception处理逻辑解析 vendor/laravel/framework/src/Illuminate/Foundation/Application.php app首先继承了c ...

  6. PhantomJS - Scriptable Headless Browser

    http://phantomjs.org/ PhantomJS is an optimal solution for: Page automation Access webpages and extr ...

  7. 批处理-For详解

    大纲 一 前言 二 for语句的基本用法 三 for /f (delims.tokens.skip.eol.userbackq.变量延迟) 四 for /r (递归遍历) 五 for /d (遍历目录 ...

  8. 被辞退时N+1的说法

    “N+”,指在这家公司工作了N年,赔偿N个月的上年平均工资,再加上1个月“代通知金”. N的上限时12: 上年平均工资的上限是工作所在城市平均工资的三倍. StudyFrom知乎 所以很明显能够算出来 ...

  9. Angular injector注入器

    <!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...

  10. 用Delphi制作动态菜单 该文章《用Delphi制作动态菜单》

    ---恢复内容开始--- 1.首先,确定动态菜单的数据来源,即要确定动态菜单标题是来自Windows的系统注册表,还是来自一个数据库,或者是来自一个子目录,主要由程序的功能而定.这里假设主窗口名为Ma ...