您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > H5

实现HTML5网站中常见的拖拽上传文件

时间:2019-10-09 10:14:21  来源:  作者:

当我们学习了 html 提供的原生拖放(drag & drop)后,是时候想一想这个东西可以用来作什么可以在什么时候使用使用的场景等等

场景分析

当我们在注册成功一个账户时,一般网站会让我们上传我们的用户头像,或者在实名认证的时候会涉及到身份证图片上传到等,这时候我们可以使用input提供的file属性进行选择本地文件进行上传。

实现HTML5网站中常见的拖拽上传文件

 

我们再想一下,当在电脑端的情况下,当用户打开文件选择框时再寻找图片对应的文件夹,再进行选取文件的时候是不是会有点麻烦呢?我们可不可以让用户找到图片文件,直接引入实现上传呢?答案是可以的。

怎么做

经过这些分析后,我们可以尝试使用 HTML5 提供的拖拽,使得目标元素增加读取文件功能,然后使用 ajax 实现图片上传。

谈一谈我们需要使用到的技术:

  • Drag & Drop: HTML5 基于拖拽的事件机制
  • File API: 可以很方便的让 Web 应用访问文件对象,File API 包括 FileList、Blob、File、FileReader、URI scheme,本文主要讲解拖拽上传中用到的 FileList 和 FileReader 接口。
  • FormData: FormData 是基于 XMLHttpRequest Level 2 的新接口,可以方便 web 应用模拟 Form 表单数据,最重要的是它支持文件的二进制流数据,这样我们就能够通过它来实现 AJAX 向后端发送文件数据了。

HTML5 拖拽事件

关于 Drag & Drop 拖拽事件,之前我写过一篇专门介绍的文章,HTML5-拖拽,大家有兴趣的话可以点击链接查看,我在这里就不在多啰嗦了~下面直接出拖拽上传的简要代码示例

var oDragWrap = document.body;
//拖进
oDragWrap.addEventListener(
 "dragenter",
 function(e) {
 e.preventDefault();
 },
 false
);
//拖离
oDragWrap.addEventListener(
 "dragleave",
 function(e) {
 dragleaveHandler(e);
 },
 false
);
//拖来拖去 , 一定要注意dragover事件一定要清除默认事件
//不然会无法触发后面的drop事件
oDragWrap.addEventListener(
 "dragover",
 function(e) {
 e.preventDefault();
 },
 false
);
//扔
oDragWrap.addEventListener(
 "drop",
 function(e) {
 dropHandler(e);
 },
 false
);
var dropHandler = function(e) {
 //将本地图片拖拽到页面中后要进行的处理都在这
};

获取文件数据 HTML5 File API

File API 中的 FileReader 接口,作为 File API 的一部分,FileReader 专门用来读取文件。我们在这里主要介绍一些 File API 中的 FileList 接口,它主要通过两个途径获取本地文件列表,一是<input type="file"/>的表单形式,另一种则是e.dataTransfer.files拖拽事件传递的文件信息。

var fileList = e.dataTransfer.files;

使用 files 方法将会获取到拖拽文件的数组形式的数据,每个文件占用一个数组的索引,如果索引不存在文件数据,将返回 Null。可以通过length属性获取文件的数量。

var fileNum = fileList.length;

拖拽上传需要注意的是需要判断两个条件

  1. 拖拽的是文件而不是页面的元素
  2. 拖拽的是图片而不是其他类型的文件,可以通过 file.type 属性获取文件的类型
// 检测是否是拖拽文件到页面的操作
if (fileList.length === 0) {
 return;
}
// 检测文件是不是图片
if (fileList[0].type.indexOf("image") === -1) {
 return;
}

下面我们看看结合之前的拖拽事件,来实现拖拽图片并在页面中预览

var dropHandler = function(e) {
 e.preventDefault(); //获取文件列表
 var fileList = e.dataTransfer.files;
 //检测是否是拖拽文件到页面的操作
 if (fileList.length == 0) {
 return;
 }
 //检测文件是不是图片
 if (fileList[0].type.indexOf("image") === -1) {
 return;
 }
 //实例化file reader对象
 var reader = new FileReader();
 var img = document.createElement("img");
 reader.onload = function(e) {
 img.src = this.result;
 oDragWrap.AppendChild(img);
 };
 reader.readAsDataURL(fileList[0]);
};
实现HTML5网站中常见的拖拽上传文件

 

当完成以上操作后,相信你可以成功的完成了拖拽图片预览的操作。当你查看 img 标签时会发现,img的src属性是一个超长的文件二进制数据,当你需要很多这种的img元素时,建议将展示区域脱离文档流,让其绝对定位减少页面的 reflow

AJAX 上传图片

既然已经获取到拖拽到web页面中的图片数据了,下一步就是将其发送到服务器端。

总结

  1. 监听拖拽: 监听页面元素的拖拽事件,包括: dragenter、dragover、dragleave 和drop,一定要将dragover的默认事件取消掉,不然无法触发drop事件。如需拖拽页面里面的元素,需要给其添加属性draggable="true"
  2. 获取拖拽文件: 在 drop 事件触发后通过e.dataTransfer.files获取拖拽文件列表,一定要将drop的默认事件取消掉,否则会默认打开文件length属性获取文件数量,type属性获取文件类型
  3. 读取图片数据并添加预览图: 实例化FileReader对象,通过其readAsDataURL(file)方法获取文件二进制流,并监听其onload事件,将e.result赋值给img的src属性,最后将图片添加到DOM中
  4. 发送图片数据


Tags:HTML5   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的 HTML5 视频播放器插件&mdash;&mdash;MuiP...【详细内容】
2021-12-16  Tags: HTML5  点击:(23)  评论:(0)  加入收藏
Web项目开发中视频播放是一个非常常见的需求,需要播放器能够支持pc端和移动端的使用,并且支持常见的视频格式。我们从github上精选了5款优秀的Html5 播放器插件分享给大家。(排...【详细内容】
2021-09-17  Tags: HTML5  点击:(101)  评论:(0)  加入收藏
前言在刚接触HTML的时候,你是否被它众多的标签所惊讶?尤其是HTNL5的标签,新增了不少,很多HTML4的标签跨版本之后就用不了了,如此多的标签,要记是不可能记完的,我们只需要一些常用的...【详细内容】
2021-08-27  Tags: HTML5  点击:(343)  评论:(0)  加入收藏
1.HTML5是什么HTML是web开发中三大规范之一,可以参考:Web前端开发-HTML入门干货 。HTML产生于1990年,1997年的HTML4.0成为互联网标准并广泛应用,HTML5是在HTML4.01(1999年发布)的...【详细内容】
2021-02-19  Tags: HTML5  点击:(195)  评论:(0)  加入收藏
HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本,由一群自由思想者设计,最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最...【详细内容】
2021-01-20  Tags: HTML5  点击:(179)  评论:(0)  加入收藏
今天给大家隆重推荐一款超强功能的H5西瓜视频播放器插件xgplayer。 xgplayer 字节跳动公司西瓜播放器技术团队推出的开源音视频解决方案,star高达3.2K+。实现自定义加载、缓...【详细内容】
2020-11-24  Tags: HTML5  点击:(199)  评论:(0)  加入收藏
今天给大家分享一款超全功能的跨浏览器平台甘特图表库DHTMLXGantt。 dhtmlx-gantt DHTMLX公司开源的 JavaScript 甘特图/横道图/条状图类库。用来快速构建显示项目、进度,和...【详细内容】
2020-11-12  Tags: HTML5  点击:(113)  评论:(0)  加入收藏
在本文中,我列出了十个我过去没用过的HTML5功能,但现在发现它们很有用,废话不多说,让我们开始吧。 detais 标签<details>标签向用户提供按需查看详细信息的效果。如果需要按需...【详细内容】
2020-10-09  Tags: HTML5  点击:(98)  评论:(0)  加入收藏
文章《HTML5语法概述》中,介绍了HTML5文档的组成,HTML5的组成可以用下图来表示: 除了上面的DOCTYPE标记以及html、head、title、meta、body元素外,我们编写HTML5文档时,会经常用...【详细内容】
2020-10-07  Tags: HTML5  点击:(70)  评论:(0)  加入收藏
介绍APlayer是一个简约且漂亮的HTML5音乐播放器,支持多种模式,包括播放列表模式、吸底模式、迷你模式、MSE模式、HLS模式。 Githubhttps://github.com/DIYgod/APlayer安装使...【详细内容】
2020-09-07  Tags: HTML5  点击:(557)  评论:(0)  加入收藏
▌简易百科推荐
前言在刚接触HTML的时候,你是否被它众多的标签所惊讶?尤其是HTNL5的标签,新增了不少,很多HTML4的标签跨版本之后就用不了了,如此多的标签,要记是不可能记完的,我们只需要一些常用的...【详细内容】
2021-08-27  鳌拜的表哥熬夜    Tags:HTML5   点击:(343)  评论:(0)  加入收藏
前言前段时间笔者一直忙于数据可视化方面的工作,比如如何实现拖拽式生成可视化大屏,如何定制可视化图表交互和数据导入方案等,这块需求在B端企业中应用非常大,所以非常有探索价...【详细内容】
2021-08-18  趣谈前端    Tags:H5编辑器   点击:(90)  评论:(0)  加入收藏
前言移动端开发在前端里像神一样地存在,不是说它多难而是说它坑位实在太多了,怎样填都填不完。Android和iOS各显神通,Android的系统版本和屏幕分辨率多得难以一招兼容,iOS的顽固...【详细内容】
2021-03-18      Tags:H5   点击:(229)  评论:(0)  加入收藏
1.HTML5是什么HTML是web开发中三大规范之一,可以参考:Web前端开发-HTML入门干货 。HTML产生于1990年,1997年的HTML4.0成为互联网标准并广泛应用,HTML5是在HTML4.01(1999年发布)的...【详细内容】
2021-02-19      Tags:HTML5   点击:(195)  评论:(0)  加入收藏
HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本,由一群自由思想者设计,最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最...【详细内容】
2021-01-20      Tags:HTML5   点击:(179)  评论:(0)  加入收藏
前言浏览器越来越强大,从文字、图片、到声音、视频、动画与游戏都有了丰富的应用。H5之后,不仅仅是表现层,数据存储与通讯能力也得到大幅度提高,并逐渐取得共识,形成了标准。随着...【详细内容】
2020-12-29      Tags:H5应用   点击:(165)  评论:(0)  加入收藏
今天给大家隆重推荐一款超强功能的H5西瓜视频播放器插件xgplayer。 xgplayer 字节跳动公司西瓜播放器技术团队推出的开源音视频解决方案,star高达3.2K+。实现自定义加载、缓...【详细内容】
2020-11-24      Tags:XGPlayer   点击:(199)  评论:(0)  加入收藏
今天给大家推荐一款超棒的H5可视化网页制作编辑工具H5DS。 h5ds 基于HTML5构建的web网页可视化制作器。通过轻松拖拽元素即可快速生成精美的H5页面。 技术栈 前端:React+Mo...【详细内容】
2020-11-12      Tags:H5DS   点击:(393)  评论:(0)  加入收藏
今天给大家分享一款超全功能的跨浏览器平台甘特图表库DHTMLXGantt。 dhtmlx-gantt DHTMLX公司开源的 JavaScript 甘特图/横道图/条状图类库。用来快速构建显示项目、进度,和...【详细内容】
2020-11-12      Tags:HTML5   点击:(113)  评论:(0)  加入收藏
项目已经在10月底上线,最近又进入到其他项目里,到今天才抽出时间对这个项目总结一下。回顾一下,在项目的初期就设定为轻量级H5 App,上线后已经运行在 原生app、微信小程序、百...【详细内容】
2020-11-10      Tags:app开发   点击:(109)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条