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. P6739 [BalticOI 2014 Day1] Three Friends 题解

    目录 写在前面 Solution 何为字符串哈希(可跳过): Code 写在前面 P6739 [BalticOI 2014 Day1] Three Friends 听说这题可以用比较暴力的做法过,比如 ...

  2. Java 学习之路 -- day00

    Java 学习之路 -- day00 Typora 快捷键操作 标题:#+空格 2. *斜体* 3. **加粗** 4. **斜体加粗*** 5. ~~删除线~~ 6. > 引用 7. ···分 ...

  3. react空标签之The React Fragment

    如何使用React.Fragment创建不可见的HTML标签 在研究Ant Design Pro项目中,在登录模块中,有React.Fragment的实际应用 接下来先看一个小demo,将返回值包装在 ...

  4. java架构《Socket网络编程基础篇》

    本章主要介绍Socket的基本概念,传统的同步阻塞式I/O编程,伪异步IO实现,学习NIO的同步非阻塞编程和NIO2.0(AIO)异步非阻塞编程. 目前为止,Java共支持3种网络编程模型:BIO.N ...

  5. Java获取类路径的方式

    Java环境中,如何获取当前类的路径.如何获取项目根路径等: @Test public void showURL() throws IOException { // 第一种:获取类加载的根路径 Fil ...

  6. java生成Https证书,及证书导入的步骤和过程

    以下是相关的Tomcat,JDK和Windows环境: Tomcat版本:tomcat-7.0.55 JDK版本: jdk1.6.0 目录所在的位置: Serve的目录:D:\server\tomca ...

  7. 删除无用docker镜像

    docker images | grep none | grep -v grep | awk '{print $3}' | xargs docker rmi -f

  8. 组合数取模及Lucas定理

    引入: 组合数C(m,n)表示在m个不同的元素中取出n个元素(不要求有序),产生的方案数.定义式:C(m,n)=m!/(n!*(m-n)!)(并不会使用LaTex QAQ). 根据题目中对组合数的需要 ...

  9. 【poj 2407】Relatives(数论--欧拉函数 模版题)

    题意就是求10^9以内的正整数的欧拉函数(Φ(n)表示<=n的与n互质的正整数个数). 解法:用欧拉筛和欧拉函数的一些性质:    1.若p是质数,Φ(p)=p-1:    2.欧拉函数是积性函 ...

  10. 【uva 177】Paper Folding(算法效率--模拟)

    P.S.模拟真の难打,我花了近乎三小时!o(≧口≦)o 模拟题真的要思路清晰!分块调试. 题意:著名的折纸问题:给你一张很大的纸,对折以后再对折,再对折--每次对折都是从右往左折,因此在折了很多次以后 ...