html5 拖拽文件到页面实现上传
思路：监听拖拽区域的 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 拖拽文件到页面实现上传的更多相关文章
- 拖拽文件实现无刷新上传，支持2G文件
客户端 用HTML5:jQuery File Upload http://blueimp.github.io/jQuery-File-Upload/basic-plus.html API https: ...
- 火狐html5拖拽 弹出新页面解决办法
今天做项目时,需要实现一个拖拽排序的功能,遂想到了html5的拖拽,便开始查资料,写代码.功夫不复有心人,通过网上资料作参考,排序功能成功实现.谷歌浏览器测试,拖拽平滑,无问题.火狐浏览器测试时,却无 ...
- 支持多文件上传，预览，拖拽，基于bootstra的上传插件fileinput 的ajax异步上传
首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...
- 支持多文件上传，预览，拖拽，基于bootstrap的上传插件fileinput 的ajax异步上传(转载)
首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...
- js拖拽文件夹上传
由于项目需要上传文件到服务器,于是便在文件上传的基础上增加了拖拽上传.拖拽上传当然属于文件上传的一部分,只不过在文件上传的基础上增加了拖拽的界面,主要在于前台的交互, 从拖拽的文件中获取文件列表然后调 ...
- html5(拖拽3)
<!DOCTYPE html"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
- html5拖拽事件 xhr2 实现文件上传 含进度条
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- html5实现拖拽文件上传
以下是自学it网--中级班上课笔记 网址:www.zixue.it html文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...
- 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 注 ...
随机推荐
- linux网卡驱动安装及锐捷使用
原创博文,转载请注明出处 先吐槽一下,以前装了个Centos win7双系统, 然后手贱一不小心把启动文件给删了,接下来就用grub恢复启动文件,整了一天也没搞出来还把win7的Boot Manage ...
- Forms Authentication in ASP.NET MVC 4
原文:Forms Authentication in ASP.NET MVC 4 Contents: Introduction Implement a custom membership provid ...
- 用Python实现gmail邮箱服务，实现两个邮箱之间的绑定（上）
一.本程序的起源 当我决定去中科院实习的时候,我给刘奎恩老师发了封邮件.我对此事是非常看重的,因此经常使用浏览器,打开gmail去查看刘老师有没有给我回复.因为gmail的新邮件推送的功能仅限于打开浏 ...
- Jquery文本框值改变事件（支持火狐、ie）
Jquery值改变事件支持火狐和ie浏览器,并且测试通过,绑定后台代码可以做成autocomplete控件. 具体代码列举如下: $(document).ready(function () { $(& ...
- selenium webdriver (python)
selenium webdriver (python) 第一版PDF Posted on 2013-08-30 22:59 虫师 阅读(221) 评论(0) 编辑 收藏 前言 如果你是一位有pytho ...
- 【最新】让快捷方式 实现相对路径——非.bat方式实现
快捷方式一般是使用绝对路径的,但并不是不能使用相对路径,系统为普通用户考虑一般默认使用绝对路径,这样的结果是:只要目标文件(不论是文件夹.程序.文档,也包括快捷方式)绝对位置不变,我们创建的快捷方式基 ...
- ASP.NET Web API的核心对象：HttpController
ASP.NET Web API的核心对象:HttpController 对于ASP.NET Web API来说,所谓的Web API定义在继承自ApiController的类中,可能ApiContro ...
- DIV+CSS命名参考
用了一段CSS布局设计网页,发现自己的命名有点混乱,完全按照自己的想法命名,虽然没什么影响,有不给别人看源文件,但是工作室有时候和团队合作完成项目的时候,就遇到麻烦了,要修改一个地方相当的费事.所以还 ...
- 对比AutoResetEvent和ManualResetEvent
ManualResetEvent和AutoResetEvent 比较 ManualResetEvent和AutoResetEvent都继承自EventWaitHandler,它们的唯一区别就在于父类 ...
- Workflow：自定义工作流 之 模型选择
Workflow:自定义工作流 之 模型选择 背景 毕业5年,做了4个版本的工作流框架,工作流几乎是每个企业应用开发人员必须跨过的门槛(我还没有跨过去),下面简要说一下之前的4个版本,然后重点介绍第5 ...