FileReader, readAsText
readastext filereader
FileReader.readAsText()
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsText
loadFile (file) {
if (!file) return;
log(`svg file`, file);
const fr = new FileReader();
// FileReader
fr.readAsText(file);
fr.addEventListener('loadend', (e) => {
// this.clearFeatures();
// this.addSVG(fr.result);
log(`fr.result`, fr.result);
});
},
// enter
dragoverHandler (e) {
e.preventDefault();
this.hover = true;
log(`over svg 图片`);
},
dragleaveHandler (e) {
e.preventDefault();
this.hover = false;
log(`leave svg 图片`);
},
dropHandler (e) {
// this.dragleaveHandler();
e.preventDefault()
this.hover = false;
log(`drop svg 图片`);
// 上传文件
this.loadFile(e.dataTransfer.files[0]);
},
init() {
// let dom = this.$el;
let dom = this.$refs["svg-editor-box"];
log(`dom ref`, dom);
dom.addEventListener('dragover', this.dragoverHandler, false);
dom.addEventListener('dragleave', this.dragleaveHandler, false);
dom.addEventListener('drop', this.dropHandler, false);
}
FileReader, readAsText的更多相关文章
- js文件上传原理(form表单 ,FormData + XHR2 + FileReader + canvas)
目录 form表单上传 FormData + XHR2 + FileReader + canvas 无刷新本地预览压缩上传实例 目前实现上传的方式 浏览器小于等于IE9(低版本浏览器)使用下面的方式实 ...
- HTML 5 使用 FileReader、FormData实现文件上传
一.FileReader FileReader 对象允许Web应用程序异步读取存储在用户计算机中的文件(或缓冲区的原始数据),使用File或Blob对象指定要读取的文件或数据. 1.1 实例化 var ...
- FileReader生成图片dataurl的分析
目录 相关代码及html(来源:百度百科) File API及FileReader简介 结合补充知识进行代码分析 修改尝试: 拖曳图片到网页完成转换 相关代码及html(来源:百度百科) <!D ...
- 二进制学习——Blob,ArrayBuffer、File、FileReader和FormData的区别
前言: Blob.ArrayBuffer.File.fileReader.formData这些名词总是经常看到,知道一点又好像不知道,像是同一个东西好像又不是,总是模模糊糊,最近终于下决心要弄清楚. ...
- HTML5之fileReader异步读取文件及文件切片读取
fileReader的方法与事件 fileReade实现图片预加载 fileReade实现文件读取进度条 fileReade的与file.s实现文件切片读取 一.fileReader的方法与事件 1. ...
- FileReader 和Blob File文件对象(附formData初始化方法);
一.FileReader为读取文件对象 . api 地址 相关demo 现在只讨论 readAsArrayBuffer,readAsBinaryString,readAsDataURL,rea ...
- FileReader()读取文件、图片上传预览
前言 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中File对象可以是来自用户 ...
- HTML5的File API读取文件信息
html结构: <div id="fileImage"></div> <input type="file" value=" ...
- 使用js-xlsx库,前端读取Excel报表文件
在实际开发中,经常会遇到导入Excel文件的需求,有的产品人想法更多,想要在前端直接判断文件内容格式是否正确,必填项是否已填写 依据HTML5的FileReader,可以使用新的API打开本地文件(参 ...
随机推荐
- springBoot controller入参LocalDateTime
@JsonFormat(shape = JsonFormat.Shape.STRING, pattern="yyyy-MM-dd HH:mm:ss") @DateTimeForma ...
- LOJ10141染色
SDOI 2011 染色 给定一棵有 n 个节点的无根树和 m 个操作,操作共两类. 将节点 a 到节点 b 路径上的所有节点都染上颜色: 询问节点 a 到节点 b 路径上的颜色段数量,连续相同颜色的 ...
- nginx 配置文件解读
参考:链接 在微服务的体系之下,Nginx正在被越来越多的项目采用作为网关来使用,配合 Lua 做限流.熔断等控制 --源自 nginx Lua 脚本语言,用标准C语言编写并以源代码形式开放, 其设计 ...
- hadoop的hdfs中的namenode和datanode知识总结
一,NameNode: 1, Namenode是中心服务器,单一节点(简化系统的设计和实现),负责管理文件系统的名称空间(namespace)以及客户端对文件的访问. 2, 文件操作,Namenod ...
- (30)Linux文本处理
1.cat命令:连接文件并打印输出到标准输出设备 cat 命令可以用来显示文本文件的内容(类似于 DOS 下的 type 命令),也可以把几个文件内容附加到另一个文件中,即连接合并文件. cat 命令 ...
- 【xml】Button背景色无法修改
由于新版本的主题问题,导致Android Studio的Button背景无法修改,一直呈现亮紫色. 解决方法:将app/res/values目录下的themes代码加上.Bridge即可 修改前: & ...
- 2020牛客暑期多校训练营(第四场) C - Count New String (字符串,广义后缀自动机,序列自动机)
Count New String 题意: 定义字符串函数 \(f(S,x,y)(1\le x\le y\le n)\),返回一个长度为y-x+1的字符串,第 i 位是 \(max_{i=x...x+k ...
- ACM-ICPC 2018 南京赛区网络预赛(12/12)
ACM-ICPC 2018 南京赛区网络预赛 A. An Olympian Math Problem 计算\(\sum_{i=1}^{n-1}i\cdot i!(MOD\ n)\) \(\sum_{i ...
- lca讲解 && 例题 HDU - 4547
一. 最普通的找树中两个点x,y最近公共祖先: 在进行lca之前我们要先对这一颗树中的每一个点进行一个编号,像下图一样.这个编号就是tarjan算法中的dfn[]数组 这样的话我们可以在跑tarjan ...
- Codeforces Testing Round #16 C.Skier
题意: 一个人在雪地上滑雪,每次可以向上下左右四个方向移动一个单位,如果这条路径没有被访问过,则需要5秒的时间,如果被访问过,则需要1秒(注意:判断的是两点之间的距离,不是单纯的点).给你他的行动轨迹 ...