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 注 ...
随机推荐
- java中的log
slf4j slf4j的全称是: Simple Logging Facade for Java (SLF4J). slf4j的官方网站:http://www.slf4j.org 简介 SLF4J不是 ...
- 哞哞快的 C# 高斯模糊实现（续）
昨天刚写了<哞哞快的 C# 高斯模糊实现>,里边提到了用原作者的方法实现对图像快速的高斯模糊处理,说实话,我没看懂,主要是没看懂原理,怎么就“把图片给处理了”,大概是调用了 GDIPlus ...
- iOS view和viewController的生命周期
一.ViewController的职责 对内管理与之关联的View,对外跟其他ViewController通信和协调.对于与之关联的View,ViewController总是在需要的时候才加载视图,并 ...
- ASP.NET Web API是如何根据请求选择Action的？[上篇]
ASP.NET Web API是如何根据请求选择Action的?[上篇] Web API的调用请求总是针对定义在某个HttpController中的某个Action方法,请求响应的内容来源于调用目标A ...
- C# 遍历本地网络
public static bool IsHNetCfgWayConnected(string opName) { NetSharingManagerClass netSharingMgr = new ...
- Elmah错误日志工具
Elmah错误日志工具 Exception 对于异常的处理,以前基本就是跳转到一个自定义的错误页面,觉得这样不错挺友好的.同时还是需要记录下来这些异常,才能进一步的进行修改. 怎么去记录这些错误信息呢 ...
- Linux系统小问题解决总结
[解决Ubuntu missing launcher and menu bar的问题] 按下ctrl + Alt + T打开终端: 输入以下命令: dconf reset -f /org/compiz ...
- Microsoft.VisualBasic.dll的妙用and 改善C#公共程序类库质量的10种方法
Microsoft.VisualBasic.dll的妙用(开发中肯定会用到哦) 前言 做过VB开发的都知道,有一些VB里面的好的函数在.NET里面都没有,而Microsoft.VisualBasic. ...
- rsync 文件校验及同步原理
rsync 文件校验及同步原理 参考:http://rsync.samba.org/how-rsync-works.html 我们关注的是其发送与接收校验文件的算法,这里附上原文和我老婆(^_^)的翻 ...
- tastypie Django REST framework API [Hello JSON]
tastypie is a good thing. Haven't test it thoroughly. Gonna need some provement. Now I will introduc ...