类似新浪微博和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，如果直接从网络中拖拽则该值为0
    try {
        me.handlerFiles(e.dataTransfer.files);
    } catch(c) {
        return;
    }
 
}

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