思路：监听拖拽区域的 drop 事件，阻止浏览器上的默认拖拽事件

参考:http://www.helloweba.com/view-blog-192.html

例子:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

<img src="" alt="" height="100px" width="100px">

<script>
document.addEventListener("drop",preventDe);
document.addEventListener("dragleave",preventDe);
document.addEventListener("dragover",preventDe);
document.addEventListener("dragenter",preventDe);

function preventDe(e){
e.preventDefault();
}

document.addEventListener("drop",function(e){
e.preventDefault();
var file = e.dataTransfer.files[0];
//file.type; 文件类型
//file.name;文件名
//file.size; 文件大小 btye

var img = document.getElementsByTagName("img")[0];
var dataURL = URL.createObjectURL(file);
img.src = dataURL;

var formData = new FormData();
formData.append("file",file);
// 发送XHR
XHR.send(formData);

})

</script>

</body>
</html>

html5 拖拽文件到页面实现上传的更多相关文章

  1. 拖拽文件实现无刷新上传，支持2G文件

    客户端 用HTML5:jQuery File Upload http://blueimp.github.io/jQuery-File-Upload/basic-plus.html API https: ...

  2. 火狐html5拖拽 弹出新页面解决办法

    今天做项目时,需要实现一个拖拽排序的功能,遂想到了html5的拖拽,便开始查资料,写代码.功夫不复有心人,通过网上资料作参考,排序功能成功实现.谷歌浏览器测试,拖拽平滑,无问题.火狐浏览器测试时,却无 ...

  3. 支持多文件上传，预览，拖拽，基于bootstra的上传插件fileinput 的ajax异步上传

    首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...

  4. 支持多文件上传，预览，拖拽，基于bootstrap的上传插件fileinput 的ajax异步上传(转载)

    首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...

  5. js拖拽文件夹上传

    由于项目需要上传文件到服务器,于是便在文件上传的基础上增加了拖拽上传.拖拽上传当然属于文件上传的一部分,只不过在文件上传的基础上增加了拖拽的界面,主要在于前台的交互, 从拖拽的文件中获取文件列表然后调 ...

  6. html5(拖拽3)

    <!DOCTYPE html"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

  7. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. html5实现拖拽文件上传

    以下是自学it网--中级班上课笔记 网址:www.zixue.it html文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...

  9. atitit.D&D drag&drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结

    atitit.D&D drag&drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结 1. DND的操作流程 1 2. Html5 注 ...

随机推荐

  1. 基于python的《Hadoop权威指南》一书中气象数据下载和map reduce化数据处理及其可视化

    文档内容: 1:下载<hadoop权威指南>中的气象数据 2:对下载的气象数据归档整理并读取数据 3:对气象数据进行map reduce进行处理 关键词:<Hadoop权威指南> ...

  2. Winform系列

    小菜学习编程-Winform系列(初学者)   前言 记得上次写<小菜的程序员道路(二)>,这篇文章的时候说过,要把工作以来整理的编程知识分享给大家,因为这半年来的工作实在是忙,现在也在忙 ...

  3. [Usaco2008 Open] Clear And Present Danger 寻宝之路[最短路][水]

    Description     农夫约翰正驾驶一条小艇在牛勒比海上航行．     海上有N(1≤N≤100)个岛屿,用1到N编号．约翰从1号小岛出发,最后到达N号小岛．一 张藏宝图上说,如果他的路程上 ...

  4. django 创建一个通用视图

    创建一个通用视图   抽取出我们代码中共性的东西是一个很好的编程习惯. 比如,像以下的两个Python函数:     def say_hello(person_name): print 'Hello, ...

  5. 序列化和反序列化的几种方式(DataContractSerializer)

    序列化和反序列化的几种方式(DataContractSerializer) DataContractSerializer 类 使用提供的数据协定,将类型实例序列化和反序列化为 XML 流或文档. 无法 ...

  6. MongoDB学习（翻译3）

    支持的where字句(比较多,今天先写一部分) 本节介绍支持的where字句 正如前面提到的,不是所有的C#表达式都支持where子句.您可以以此文为指导,或者你可以尝试表达,看看它是否工作(如果不支 ...

  7. zookeeper学习（上）

    zookeeper学习(上) 在前面的文章里我多次提到zookeeper对于分布式系统开发的重要性,因此对zookeeper的学习是非常必要的.本篇博文主要是讲解zookeeper的安装和zookee ...

  8. IP地址分类（转）

    IP地址分类以及C类IP地址的子网划分 国际规定:把所有的IP地址划分为 A,B,C,D,E A类地址:范围从0-127,0是保留的并且表示所有IP地址,而127也是保留的地址,并且是用于测试环回用的 ...

  9. eclipse配置自动提示EXTJS和jQurey

    extjs-2.3.0下载地址1:http://dev.sencha.com/deploy/ext-2.3.0.zip 下载地址2:http://www.sencha.com/products/ext ...

  10. 12503 - Robot Instructions

      Robot Instructions  You have a robot standing on the origin of x axis. The robot will be given som ...