参考 :

http://www.html5rocks.com/zh/tutorials/file/dndfiles/

http://blog.csdn.net/rnzuozuo/article/details/25295899

http://www.tutorialspoint.com/html5/html5_drag_drop.htm

本篇只作为个人参考

FIle Reader

method
abort()  停止读
readAsText(file,"utf-8") , 第2参数是指定解码格式,常用于读取一些 txt 文本等
readAsBinaryString(file) , 2进制, 可以用于ajax提交到后端
readAsDataURL(file) , 好像是base64 , 可以用于在本地显示图片

event
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发,无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中

  1. //display img in local
  2. //2 way : FileReader and createObjectURL
  3. document.getElementById("upload").addEventListener("change", function (e) {
  4. var inputFile = e.target;
  5. var files = G.toArray(inputFile.files);
  6. var file = files[0];
  7.  
  8. //note : minimum need ie10
  9. //createObjectURL to display img on local
  10. var URL = window.URL || window.webkitURL;
  11. var img = new Image();
  12. img.onload = function (e) {
  13. window.URL.revokeObjectURL(this.src);
  14. document.body.appendChild(this);
  15. }
  16. img.src = URL.createObjectURL(file);
  17.  
  18. //note : minimum need ie10
  19. var reader = new FileReader();
  20. reader.onload = function (e) {
  21. var img = new Image();
  22. img.src = e.target.result;
  23. document.body.appendChild(img);
  24. }
  25. reader.readAsDataURL(file);
  26. }, false);

Drag & Drop

div 要可以drag , 就放一个 draggable="true"的属性,

div 要可以drop , 就 addEventListener dragover for preventDefault(),stopPropagation() then addEventListener drop

传输时value 只能是 string 类型
"event" 在传输的时候不是同一个引用

dataTransfer.getData 是可以跨游览器的

  1. document.getElementById("drop").addEventListener("dragover", function (e) {
  2. e.stopPropagation();
  3. e.preventDefault();
  4. log("over");
  5. }, false);
  6. document.getElementById("drop").addEventListener("dragenter", function (e) {
  7. e.stopPropagation();
  8. e.preventDefault();
  9. log("enter");
  10. }, false);
  11. document.getElementById("drop").addEventListener("drop", function (e) {
  12. //var files = e.dataTransfer.files; //if drop a file from window. like use file update
  13. //log(dataTransfer.types); //if is file = "Files" , else DOMStringList
  14. e.dataTransfer.dropEffect = 'move'; //copy, link, and move
  15. var data = e.dataTransfer.getData("key");
  16. e.preventDefault();
  17. log("drop!");
  18. }, false);
  19. document.getElementById("drag").addEventListener("dragstart", function (e) {
  20. e.dataTransfer.setData("key", "must string");
  21. e.dataTransfer.effectAllowed = 'copyLink'; //none, copy, copyLink, copyMove, link, linkMove, move, all and uninitialized.
  22. var specifiedImage = document.getElementById("liushishi");
  23. e.dataTransfer.setDragImage(specifiedImage, 100, 100); //para2,para3 is mouse position x,y in the target element
  24. //e.dataTransfer.addElement(specifiedImage); //this method is same with setDragImage , better use setDragImage , because can set x,y
  25. log("drag");
  26. }, false);

Drag & Drop and File Reader的更多相关文章

  1. [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

    人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...

  2. HTML5魔法堂:全面理解Drag & Drop API

    一.前言    在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面 ...

  3. JS魔法堂:IE5~9的Drag&Drop API

    一.前言     < HTML5魔法堂:全面理解Drag & Drop API>中提到从IE5开始已经支持DnD API,但IE5~9与HTML5的API有所不同,下面我们来了解一 ...

  4. 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 注 ...

  5. Atitit。D&D drag&drop拖拽功能c#.net java swing的对比与实现总结

    Atitit.D&D drag&drop拖拽功能c#.net java swing的对比与实现总结 1. 实现一个D&D操作一般包括三个步骤: 1 2. .net黑头的拖曳机制 ...

  6. HTML 学习笔记 (drag & drop)

    拖放(Drag & Drop)是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.过去,我们用监听鼠标的Mousedown.Mouseo ...

  7. Win10/UWP新特性—Drag&Drop 拖出元素到其他App

    在以前的文章中,写过微软新特性Drag&Drop,当时可能由于处于Win10预览版,使用的VS也是预览版,只实现了从桌面拖拽文件到UWP App中,没能实现从UWP拖拽元素到Desktop A ...

  8. Draggabilly – 轻松实现拖放功能(Drag & Drop)

    Draggabilly 是一个很小的 JavaScript 库,专注于拖放功能.只需要简单的设置参数就可以在你的网站用添加拖放功能.兼容 IE8+ 浏览器,支持多点触摸.可以灵活绑定事件,支持 Req ...

  9. 重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop

    [源码下载] 重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop 作者:weba ...

随机推荐

  1. Selenium索引

    Common Selenium各种工具比较 Selenium firefox 版本问题 Selenium IDE Selenium IDE整理 WebDriver Java 版本 Selenium开始 ...

  2. hibernate初涉

    好久都不曾写写总结一些东西了,惰性真的是令人难以克制!虽然和许多北漂族一样,艰苦而又迷茫,但是我总能找到一些方向,一点期盼,因为你就我的目标.我会坚持下去,重拾青春的热血,既然人生如戏,那我不当猪脚. ...

  3. Unity3D NGUI UIPlayTween控件(一)动态打开关闭窗口

    利用NGUI自带的脚本控件实现按钮点击窗口滑动出现与隐藏. 创建界面 首先建立如下图的三个BUtton与三个Panel 绑定脚本 然后在每个Button上添加UIPlayTween脚本,在Intera ...

  4. 集群中几种session同步解决方案的比较

    1. 客户端cookie加密 .比较好的方法是自己采用cookie机制来实现一个session,在应用中使用此session实现. 问题:session中数据不能太多,最好只有个用户id. Sessi ...

  5. Android-Uiautomator:[5]停止monkey测试

    方法/步骤 1 其实停止很简单,无非就是结束掉monkey的进程即可 如何停止呢 2 ps命令  查找uiautomator的进程 打开cmd命令行窗口 输入: adb shell ps | grep ...

  6. 菜鸟学习 - Unity中的热更新 - LuaInterface用户指南

    [由于学习,所以翻译!] 1.介绍 LuaInterface 是 Lua 语言和 Microsoft.NET 平台公共语言运行时 (CLR) 之间的集成库. 非常多语言已经有面向 CLR 编译器和 C ...

  7. root用户改动普通用户文件

    首先使用别的用户登录入LINUX系统,切换成root用户.进入到须要改动的用户主文件夹,对该用户文件夹下的文件进行改动

  8. Swift学习笔记 - 函数与闭包

    import Foundation //1.函数的定义与调用//以 func 作为前缀,返回箭头 -> 表示函数的返回类型func sayHello(name: String) -> St ...

  9. LAMP php5.4编译 _php_image_stream_putc等问题

    编译时出现下列问题时: In file included from /usr/local/src/php-5.4.6/ext/gd/gd.c:103: /usr/local/src/php-5.4.6 ...

  10. Linux下查看所有用户(shell脚本获取)

      在Linux系统中,使用者账号管理最重要的两个文件是/etc/password和/etc/shadow.在/etc/password文件中,每一行都代表一个账号,但是有很多账号是系统账号.比如:b ...