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的更多相关文章

  1. js文件上传原理(form表单 ,FormData + XHR2 + FileReader + canvas)

    目录 form表单上传 FormData + XHR2 + FileReader + canvas 无刷新本地预览压缩上传实例 目前实现上传的方式 浏览器小于等于IE9(低版本浏览器)使用下面的方式实 ...

  2. HTML 5 使用 FileReader、FormData实现文件上传

    一.FileReader FileReader 对象允许Web应用程序异步读取存储在用户计算机中的文件(或缓冲区的原始数据),使用File或Blob对象指定要读取的文件或数据. 1.1 实例化 var ...

  3. FileReader生成图片dataurl的分析

    目录 相关代码及html(来源:百度百科) File API及FileReader简介 结合补充知识进行代码分析 修改尝试: 拖曳图片到网页完成转换 相关代码及html(来源:百度百科) <!D ...

  4. 二进制学习——Blob,ArrayBuffer、File、FileReader和FormData的区别

    前言: Blob.ArrayBuffer.File.fileReader.formData这些名词总是经常看到,知道一点又好像不知道,像是同一个东西好像又不是,总是模模糊糊,最近终于下决心要弄清楚. ...

  5. HTML5之fileReader异步读取文件及文件切片读取

    fileReader的方法与事件 fileReade实现图片预加载 fileReade实现文件读取进度条 fileReade的与file.s实现文件切片读取 一.fileReader的方法与事件 1. ...

  6. FileReader 和Blob File文件对象(附formData初始化方法);

    一.FileReader为读取文件对象 . api  地址   相关demo 现在只讨论  readAsArrayBuffer,readAsBinaryString,readAsDataURL,rea ...

  7. FileReader()读取文件、图片上传预览

    前言 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中File对象可以是来自用户 ...

  8. HTML5的File API读取文件信息

    html结构: <div id="fileImage"></div> <input type="file" value=" ...

  9. 使用js-xlsx库,前端读取Excel报表文件

    在实际开发中,经常会遇到导入Excel文件的需求,有的产品人想法更多,想要在前端直接判断文件内容格式是否正确,必填项是否已填写 依据HTML5的FileReader,可以使用新的API打开本地文件(参 ...

随机推荐

  1. 【PostgreSQL】PostgreSQL数据库浅析

    前言 工作中数据库用的不多,大部分都是简单查询一下了事,某项目中突然要求后端进行比较全面的数据库操作,现对自己学到的东西做一下总结. 简介 废话不多说,上官网地址: PostgreSQL 9.4.4 ...

  2. Apache HTTP Server 映射URL到文件系统(翻译)

    div.example { background-color: rgba(229, 236, 243, 1); color: rgba(0, 0, 0, 1); padding: 0.5em; mar ...

  3. P2573 [SCOI2012]滑雪 题解

    下午花了三个小时肝这道题,心态差点爆炸! 下面是分析: 1 题目要求: 2 求最小生成树 3 但是 4 - a是从1号点开始的 --> 如果以后的某个点比一号高,则不可能到达 5 - a只能从高 ...

  4. (一)Spring-Boot-操作-Redis

    Spring-Boot-操作-Redis 1.Spring Data Redis 1.1 引入依赖 1.2 配置 Redis 信息 1.3 使用 2.Spring Cache 2.1 引入依赖 2.2 ...

  5. Scala中使用fastJson 解析json字符串

    Scala中使用fastJson 解析json字符串 添加依赖 2.解析json字符 2.1可以通过JSON中的parseObject方法,把json字符转转换为一个JSONObject对象 2.2然 ...

  6. Spring Boot整合Spring Data JPA

    1.JPA 2.Spring Data JPA 3.导入依赖 4.连接数据库 5.实体类 6.Repository 7.测试 1.JPA JPA是Java Persistence API的简称,中文名 ...

  7. sql如何查询数据库最后10条记录并正序输出

    select * from (select * from 表名 order by 字段 desc limit 10) 临时表 order by 字段

  8. springboot中的parent依赖作用详解

    最近在阅读springboot+vue全栈开发实战,松哥编写的,虽然比较简单,各种技术没有深入讲解,但是还是可以看看的,特别是我这个前端菜鸟哈哈,以后可是要学习全栈的,把书中看到的不会的地方会记录下笔 ...

  9. 从ReentrantLock实现非公平锁的源码理解AQS中的CLH队列

    虽然前面也看过AQS的文章,并且转载过一篇大佬的分析,但是我觉得他们对于AQS和ReentrantLock部分的源码的分析并不详细,自己理解期来还是有问题,于是自己准备花时间重新梳理下,好了,进入正题 ...

  10. Joomla 3.4.6 RCE复现及分析

    出品|MS08067实验室(www.ms08067.com) 本文作者:whojoe(MS08067安全实验室SRST TEAM成员) 前言 前几天看了下PHP 反序列化字符逃逸学习,有大佬简化了一下 ...