HTML5新增的File API, 可以获取名称、文件大小、类型等信息,需先对DOM中的Element进行拖拽事件绑定

相关API

首先获取节点,绑定拖动到该节点的事件,可以改变鼠标形状

var draghere = document.querySelector('#draghere');
draghere.addEventListener('dragover', function(e){
e.preventDefault();
e.stopPropagation();
e.dataTransfer.dropEffect = 'copy';
});

鼠标松开时,再绑定drop事件,使用 event.dataTransfer.files 可以获取文件列表

draghere.addEventListener('drop', function(e){
e.preventDefault();
e.stopPropagation();
var fileLists = e.dataTransfer.files;
}

获取到指定的文件后,再获取文件名称和文件大小,可以由这些信息判断是否继续操作

var file = fileLists[0];
var fileName = file.name;
var fileSize = file.size

如果需要获取文件的内容,首先得判断文件是否加载,再使用 FileReader 类的 readAsText(file) 方法进行文件读取

由reader的 result 属性取得内容

var reader = new FileReader();
reader.onloadend = function(e){
if(e.target.readyState === FileReader.DONE){
// 获取文件内容
var fileContent = reader.result;
}
}
reader.readAsText(file);

小示例

把文件拖到网页中,根据文件名和类型判断是否读取其中的内容,然后使用强大的在线编辑器 CodeMirror 展示结果

CodeMirror支持VIM和EMACS, 还示例Sublime Text, 连它的快捷键也支持不少。。

参考链接

http://javascript.ruanyifeng.com/dom/dragndrop.html

https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

HTML5文件拖拽的更多相关文章

  1. html5 文件拖拽上传

    本文首先发表在  码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...

  2. HTML5文件拖拽上传记录

    JS文件: var FileName = ""; var FileStr = ""; (function () { function $id(id) { ret ...

  3. HTML5应用之文件拖拽上传

    使用HTML5的文件API,可以将操作系统中的文件拖放到浏览器的指定区域,实现文件上传到服务器.本文将结合实例讲解HTML5+jQuery+PHP实现拖拽上传图片的过程,来看下HTML5的魅力吧. H ...

  4. Html5+NodeJS——拖拽多个文件上传到服务器

    实现多文件拖拽上传的简易Node项目,可以在github上下载,你可以先下载下来:https://github.com/Johnharvy/upLoadFiles/. 解开下载下的zip格式包,建议用 ...

  5. html5 drag 文件拖拽浅淡

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 关于HTML5的拖拽

    不介绍具体情况,先看API,注意看后面括号的说明 dragstart:拖拽开始(应用于被拖拽对象) drag:拖拽中(应用于被拖拽对象) dragenter:拖拽到指定位置(应用于拖拽目标) drag ...

  7. HTML5之拖拽(兼容IE和非IE)

    前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实 ...

  8. VC实现文件拖拽OnDropFiles

    文章转自http://blog.csdn.net/zamaolangzi/article/details/5645284 使用过QQ的人都知道,只要把文件拖拽到消息框中就可以传送文件了.那么这种功能是 ...

  9. C#之winform实现文件拖拽功能

    将一个文件拖拽到窗体的某个控件时,将该控件的路径显示在该控件上,只要拿到了路径自然可以读取文件中的内容了 将一个控件的属性AllowDrop设置为true,然后添加DragDrop.DragEnter ...

随机推荐

  1. 不关闭seLinux解决vsftpd服务本地用户不能登录问题(500 OOPS: cannot change directory:/home/***

    这里不讲vsftpd的基本配置,网上教程已经太多了.这里只说seLinux的问题. 日前在CentOS6.5中安装了vsftpd,按照网上搜索的教程,配置好/etc/vsftpd/vsftpd.con ...

  2. 对 ASP.NET 页面进行跟踪(Control Tree)

    在页面头部加入属性 : Trace="True" 参考MSDN: https://msdn.microsoft.com/zh-cn/library/94c55d08(v=vs.10 ...

  3. HDU 4422 The Little Girl who Picks Mushrooms(简单题)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4422 题目大意:小姑娘背着5个包去山上采蘑菇,每座山上只能用一个背包采集.三个小精灵会要她3个背包,其 ...

  4. Pascal Language: Recommended Materials

    Recommended materials: http://www.marcocantu.com/epascal/

  5. hdu 5014 Number Sequence

    为了a异或b的和最大,只需另b在不大于n的情况下按位取反即可. 这里有两个输出小技巧可以参考: 1.在用printf输出__int64时,在windows下使用格式"%I64d", ...

  6. linux 终端快捷键

    1. 移动光标快捷键 ctrl+f 向前移动一个字符 ctrl+b 向后移动一个字符 alt+f 向前移动一个单词 alt+b 向后移动一个单词 ctrl+a 移动到当前行首 ctrl+e 移动到当前 ...

  7. C# 读取快捷方式指向的文件

    C# 读取快捷方式指向的文件 [Flags()] public enum SLR_FLAGS { SLR_NO_UI = 0x1, SLR_ANY_MATCH = 0x2, SLR_UPDATE = ...

  8. Html盒子模型学习总结

    Html的盒子模型 1.总的来说Html元素可以分为两类:即块状元素和行内元素. 2.块状元素(Block)类型的元素可以设置Width和Height值属性,而行内(Inline)类型无效. 3.浏览 ...

  9. Cassandra1.2文档学习(6)—— 客户端数据请求

    参考文档:http://www.datastax.com/documentation/cassandra/1.2/webhelp/index.html#cassandra/architecture/a ...

  10. php 中文字符串首字母的获取函数

    这篇文章介绍了php 中文字符串首字母的获取函数,有需要的朋友可以参考一下 function chineseFirst($str) { $str= iconv("UTF-8",&q ...