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);
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)