思路：监听拖拽区域的 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. 只有五行的Floyd最短路算法

            暑假,小哼准备去一些城市旅游.有些城市之间有公路,有些城市之间则没有,如下图.为了节省经费以及方便计划旅程,小哼希望在出发之前知道任意两个城市之前的最短路程.         上图中有 ...

  2. 网络tcp/ip资料

    1. Linux TCP/IP 协议栈分析,这是chinaunix.net论坛里的N人写的电子书,可以在这里下载PDF版本.http://blog.chinaunix.net/u2/85263/sho ...

  3. 一个人开发的html整站源码分享网站就这么上线了

    项目我采用了纯静态html+动态搜索的模式,就是说详情页.主页等纯静态页面,仅搜索页面采用数据库访问搜索,搜索结果分为静态和动态,如果输入的关键字是已存在的标签就静态展示,否则就动态展示,这么做的好处 ...

  4. windows下Jdk和Tomcat的安装配置

    Jdk全称Java development Kit,Jdk是sun公司提供的免费开源的java语言开发工具包,现在最新版本是8.0,说道jdk的版本,有些人可能会有疑惑,怎么有说jdk1.6,jdk1 ...

  5. Stream使用教程

    现在,计算机CPU运行速度的快速发展已经远远超过了内存的访问速度.越来越多的程序性能被内存带宽所限制,而不是计算机的CPU运行速率. Stream benchmark是一个简单的合成基准测试程序,衡量 ...

  6. Linux 环境进程间通信(六)：

    linux下进程间通信的几种主要手段: 管道(Pipe)及有名管道(named pipe):管道可用于具有亲缘关系进程间的通信,有名管道克服了管道没有名字的限制,因此,除具有管道所具有的功能外,它还允 ...

  7. Apache Rewrite 中文详解

    这几天一直在研究Apache的重写规则,虽然网上有很多教程,不过发现大部分都是抄袭一个人的,一点都不全,所以我想写一个简单的易于理解的教程,我学习.htaccess是从目录保护开始的,这个也比较简单, ...

  8. django restul webservice返回json数据

    做这个demo的前提是你已经配好了python ,django ,djangorestframwork(在我的上一篇博客中有介绍,大家也可以google),mysql-python等. djangor ...

  9. Python之FTP多线程下载文件之分块多线程文件合并

    Python之FTP多线程下载文件之分块多线程文件合并 欢迎大家阅读Python之FTP多线程下载系列之二:Python之FTP多线程下载文件之分块多线程文件合并,本系列的第一篇:Python之FTP ...

  10. Oracal的Lpad函数

    lpad函数是Oracle数据库函数,lpad函数从左边对字符串使用指定的字符进行填充.从其字面意思也可以理解,l是left的简写,pad是填充的意思,所以lpad就是从左边填充的意思. 语法格式如下 ...