Drag & Drop and File Reader
参考 :
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 读取中
- //display img in local
- //2 way : FileReader and createObjectURL
- document.getElementById("upload").addEventListener("change", function (e) {
- var inputFile = e.target;
- var files = G.toArray(inputFile.files);
- var file = files[0];
- //note : minimum need ie10
- //createObjectURL to display img on local
- var URL = window.URL || window.webkitURL;
- var img = new Image();
- img.onload = function (e) {
- window.URL.revokeObjectURL(this.src);
- document.body.appendChild(this);
- }
- img.src = URL.createObjectURL(file);
- //note : minimum need ie10
- var reader = new FileReader();
- reader.onload = function (e) {
- var img = new Image();
- img.src = e.target.result;
- document.body.appendChild(img);
- }
- reader.readAsDataURL(file);
- }, false);
Drag & Drop
div 要可以drag , 就放一个 draggable="true"的属性,
div 要可以drop , 就 addEventListener dragover for preventDefault(),stopPropagation() then addEventListener drop
传输时value 只能是 string 类型
"event" 在传输的时候不是同一个引用
dataTransfer.getData 是可以跨游览器的
- document.getElementById("drop").addEventListener("dragover", function (e) {
- e.stopPropagation();
- e.preventDefault();
- log("over");
- }, false);
- document.getElementById("drop").addEventListener("dragenter", function (e) {
- e.stopPropagation();
- e.preventDefault();
- log("enter");
- }, false);
- document.getElementById("drop").addEventListener("drop", function (e) {
- //var files = e.dataTransfer.files; //if drop a file from window. like use file update
- //log(dataTransfer.types); //if is file = "Files" , else DOMStringList
- e.dataTransfer.dropEffect = 'move'; //copy, link, and move
- var data = e.dataTransfer.getData("key");
- e.preventDefault();
- log("drop!");
- }, false);
- document.getElementById("drag").addEventListener("dragstart", function (e) {
- e.dataTransfer.setData("key", "must string");
- e.dataTransfer.effectAllowed = 'copyLink'; //none, copy, copyLink, copyMove, link, linkMove, move, all and uninitialized.
- var specifiedImage = document.getElementById("liushishi");
- e.dataTransfer.setDragImage(specifiedImage, 100, 100); //para2,para3 is mouse position x,y in the target element
- //e.dataTransfer.addElement(specifiedImage); //this method is same with setDragImage , better use setDragImage , because can set x,y
- log("drag");
- }, false);
Drag & Drop and File Reader的更多相关文章
- [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)
人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...
- HTML5魔法堂:全面理解Drag & Drop API
一.前言 在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面 ...
- JS魔法堂:IE5~9的Drag&Drop API
一.前言 < HTML5魔法堂:全面理解Drag & Drop API>中提到从IE5开始已经支持DnD API,但IE5~9与HTML5的API有所不同,下面我们来了解一 ...
- 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 注 ...
- Atitit。D&D drag&drop拖拽功能c#.net java swing的对比与实现总结
Atitit.D&D drag&drop拖拽功能c#.net java swing的对比与实现总结 1. 实现一个D&D操作一般包括三个步骤: 1 2. .net黑头的拖曳机制 ...
- HTML 学习笔记 (drag & drop)
拖放(Drag & Drop)是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.过去,我们用监听鼠标的Mousedown.Mouseo ...
- Win10/UWP新特性—Drag&Drop 拖出元素到其他App
在以前的文章中,写过微软新特性Drag&Drop,当时可能由于处于Win10预览版,使用的VS也是预览版,只实现了从桌面拖拽文件到UWP App中,没能实现从UWP拖拽元素到Desktop A ...
- Draggabilly – 轻松实现拖放功能(Drag & Drop)
Draggabilly 是一个很小的 JavaScript 库,专注于拖放功能.只需要简单的设置参数就可以在你的网站用添加拖放功能.兼容 IE8+ 浏览器,支持多点触摸.可以灵活绑定事件,支持 Req ...
- 重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop
[源码下载] 重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop 作者:weba ...
随机推荐
- Selenium索引
Common Selenium各种工具比较 Selenium firefox 版本问题 Selenium IDE Selenium IDE整理 WebDriver Java 版本 Selenium开始 ...
- hibernate初涉
好久都不曾写写总结一些东西了,惰性真的是令人难以克制!虽然和许多北漂族一样,艰苦而又迷茫,但是我总能找到一些方向,一点期盼,因为你就我的目标.我会坚持下去,重拾青春的热血,既然人生如戏,那我不当猪脚. ...
- Unity3D NGUI UIPlayTween控件(一)动态打开关闭窗口
利用NGUI自带的脚本控件实现按钮点击窗口滑动出现与隐藏. 创建界面 首先建立如下图的三个BUtton与三个Panel 绑定脚本 然后在每个Button上添加UIPlayTween脚本,在Intera ...
- 集群中几种session同步解决方案的比较
1. 客户端cookie加密 .比较好的方法是自己采用cookie机制来实现一个session,在应用中使用此session实现. 问题:session中数据不能太多,最好只有个用户id. Sessi ...
- Android-Uiautomator:[5]停止monkey测试
方法/步骤 1 其实停止很简单,无非就是结束掉monkey的进程即可 如何停止呢 2 ps命令 查找uiautomator的进程 打开cmd命令行窗口 输入: adb shell ps | grep ...
- 菜鸟学习 - Unity中的热更新 - LuaInterface用户指南
[由于学习,所以翻译!] 1.介绍 LuaInterface 是 Lua 语言和 Microsoft.NET 平台公共语言运行时 (CLR) 之间的集成库. 非常多语言已经有面向 CLR 编译器和 C ...
- root用户改动普通用户文件
首先使用别的用户登录入LINUX系统,切换成root用户.进入到须要改动的用户主文件夹,对该用户文件夹下的文件进行改动
- Swift学习笔记 - 函数与闭包
import Foundation //1.函数的定义与调用//以 func 作为前缀,返回箭头 -> 表示函数的返回类型func sayHello(name: String) -> St ...
- 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 ...
- Linux下查看所有用户(shell脚本获取)
在Linux系统中,使用者账号管理最重要的两个文件是/etc/password和/etc/shadow.在/etc/password文件中,每一行都代表一个账号,但是有很多账号是系统账号.比如:b ...