思路：监听拖拽区域的 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. C#程序调用cmd.exe执行命令

    代码部分 using System.Diagnostics; public class CmdHelper { private static string CmdPath = @"C:\Wi ...

  2. 关于AngularJS的分享

    去年下半年在部门内部做的一个关于AngularJS的分享,放在这里,当作一个记录. 点击下载

  3. selenium-webdriver(python) 11

    selenium-webdriver(python) (十一) 本节重点: 控制滚动条到底部 有时候我们需要控制页面滚动条上的滚动条,但滚动条并非页面上的元素,这个时候就需要借助js是来进行操作.一般 ...

  4. JavaScript –type

    JavaScript –类型之我晕 每次写博我觉得取上恬当的题目比整篇行文都难,词量有限的情况下突然想到JavaScript拾遗应该会是一个非常文艺而夺目的博文题目,但我并没有急着使用,经验告诉我应该 ...

  5. 一个吊丝android个人开发者的逆袭之路

    转眼间,一年多过去了,记得我开发第一款android应用的时候,那是在前年的冬天,我本人是做java的,android的学习和开发完全是业余爱好,从前年上半年到前年下半年大约花了半年的业余时间把and ...

  6. .NET程序集1

    谈谈.NET程序集(一) 谈谈.NET程序集(一) The Assembly in .NET by 唐小崇 http://www.cnblogs.com/tangchong 在.NET出现之前, Wi ...

  7. python logging info -> 将服务请求记录输出

    在tornado 里面这样用 看看logging.warning() , logging.info() , 我们非常想用 zdaemon , 和 logging 将对系统的所有访问转换到服务器里面,作 ...

  8. [置顶] JAVA从零单排4-----继承、封装和多态详解

    继承 Java三大特征之一:继承.Java的继承具有单继承的特点,每个子类只能有一个直接父类. 继承的特点 Java的继承用extends关键字来实现,被继承的类成为父类,实现继承的类被称为子类.子类 ...

  9. 深入浅出学习Spring框架（三）：AOP 详解

    AOP的英文解释——AOPAspect Oriented Programming面向切面编程.主要目的是通过预编译方式和运行期动态代理实现在不修改源代码的情况下给程序动态统一添加功能的一种技术. 在反 ...

  10. 横瓜先生关于如何利用MYSQL数据库设计CMS系统处理100亿级TB规模的数据量

    遥执乾坤(44758121)  18:21:23 mysql据说只能使用一个索引,我这里几乎所有字段都有索引. 但每个字段就算用索引,也需要扫描至少100w以上记录. 横瓜(601069289)  1 ...