思路：监听拖拽区域的 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. ubuntu-使用终端配置网络

    文件说明: IP.网关.掩码的配置文件:/etc/network/interfaces DNS配置文件:/etc/resolv.conf 配置步骤: 1)配置有关IP文件 配置IP.网关.掩码这些信息 ...

  2. c/c++操作访问数据，是堆中的数据快还是栈中的数据快

    这里的问题其实问的是对堆与栈的数据访问有什么不同. 观察如下代码: #include<stdio.h> #include<iostream> using namespace s ...

  3. Asp.net MVC集成Google Calendar API(附Demo源码)

    Asp.net MVC集成Google Calendar API(附Demo源码) Google Calendar是非常方便的日程管理应用,很多人都非常熟悉.Google的应用在国内不稳定,但是在国外 ...

  4. Mac 下ll命令 command not found

    在linux下习惯使用ll.la.l等ls别名的童鞋到mac os提示command not found -461deMacBook-Pro:~ root# cd ~ -461deMacBook-Pr ...

  5. PureMVC(JS版）源码解析

    PureMVC(JS版)源码解析:总结   PureMVC源码中设计到的11个类已经全部解析完了,回首想想,花了一周的时间做的这点事情还是挺值得的,自己的文字组织表达能力和对pureMVC的理解也在写 ...

  6. 基于 Aliexpress API 的小程序 : 批量 Copy 产品到不同的店铺

    第一个基于 Aliexpress API 的小程序 : 批量 Copy 产品到不同的店铺 还没来得及用 API 重写软件, 先写个小程序来缓解一下手工压力: 批量Copy 产品到不同的店铺. 开网店 ...

  7. Citrix 服务器虚拟化之三 Xenserver 网络管理

    Citrix 服务器虚拟化之三 Xenserver 网络管理 每个Xenserver服务器都有一个或多个网络.XenServer 网络是虚拟的以太网交换机,它可以连接到外部接口(带或不带 VLAN 标 ...

  8. 【deep learning学习笔记】注释yusugomori的RBM代码 --- 头文件

    百度了半天yusugomori,也不知道他是谁.不过这位老兄写了deep learning的代码,包括RBM.逻辑回归.DBN.autoencoder等,实现语言包括c.c++.java.python ...

  9. html标签详解，html标签属性大全（完美版），包括css属性详解

    这个是平时放在笔记里,需要什么了,查下当字典用,想不起来了就查下,个人在用有道云,查询框一输就找到了.下篇会把我整理手机的html5发了.引用在某处常看到的话.楼主耗时费心整理··请拿走······· ...

  10. oracle表空间表分区详解及oracle表分区查询使用方法(转+整理)

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...