类似新浪微博和google图片的HTML5实现图片拖拽上传功能

2019独角兽企业重金招聘Python工程师标准>>>

来源：

http://www.lovesunlife.com/?p=315

这篇文章对google图片为蓝本就拖拽上传功能分析得可谓一个详细。在此收录一下

dragenter事件：当文件被拖进改元素中时触发

dragover事件：类似于mouseover事件，只是拖拽经过的时候触发

drop事件：拖拽释放的时候触发，及拖拽图片并放下图片时触发（不知道是否易懂）

主要有这么几个交互点，交互功能可以参考google图片搜索：

1）.图片被拖入当前网页时，显示拖拽提示层，此时通过document的dragover或dragenter触发

2）.图片拖拽进来后拖拽出去后，隐藏拖拽提示层，没有该事件，自己在做这个项目中参考了google的实现技巧，是通过mouseover事件来控制提示层的隐藏的

3）.拖拽释放时（drop事件），获取图片数据，进行格式的判断，并上传图片

e.stopPropagation();
e.preventDefault();//阻止默认行为，避免图片在浏览器中打开(默认行为)
if (e.dataTransfer.files.length) {//如果是从外部拖拽则length不等于0，如果直接从网络中拖拽则该值为0try {me.handlerFiles(e.dataTransfer.files);} catch(c) {return;}}

转载于:https://my.oschina.net/deanzhao/blog/159689

类似新浪微博和google图片的HTML5实现图片拖拽上传功能相关推荐

html5 上传超大文件,HTML5教程如何拖拽上传大文件
本篇教程探讨了HTML5教程如何拖拽上传大文件,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性 ...
go语言接收html上传的文件,html5原生js拖拽上传（golang版）
package main import ("fmt" "io" "net/http" "os")const( uploa ...
Nodejs express、html5实现拖拽上传（转载）
一.前言文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖拽上传的需要的api.node ...
使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
昨天我们介绍了一款HTML5文件上传的jQuery插件:jQuery HTML5 uploader,今天我们将开发一个简单的叫upload center的图片上传程序,允许用户使用拖拽方式来上传电脑上 ...
拖拽上传技术-----html5[转载]
原网址:http://blog.163.com/mongying_net/blog/static/35112712012345352226/ 拖拽上传应用主要使用了以下HTML5技术: Drag&am ...
dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库....
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
html5+php实现文件拖动上传功能
界面样式我是参考了一个国外的相册网站,改动不大,只是把鸟语转换成中文,以及上传时的样式也进行了改动,之所以选这个的原因就是,我很容易做扩展,它支持3种方式添加图片,一种拖拽上传,一种常规的选择文件上传 ...
html5之多文件拖拽上传预览
最近对于html5预览功能很是感兴趣,特地拿出来研究一小下,并以一个小项目举例讲解. h5中的input有个type=file 就是文件上传控件,有个属性multiple就是h5新增的支持多选上传文件 ...
html ajax打包成app,利用HTML5与ajax完成拖拽上传文件
前言基于ajax的异步模式的上传控件,基本功能如下: 拖拽上传(利用HTML5新增特定拖拽事件以及 event的dataTransfer属性) 单文件/多文件切换(利用php实现单/多文件上传) ...

类似新浪微博和google图片的HTML5实现图片拖拽上传功能

类似新浪微博和google图片的HTML5实现图片拖拽上传功能相关推荐

最新文章

热门文章