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打开本地文件(参 ...
随机推荐
- promise有几种状态,什么时候会进入catch
三个状态:pending.fulfilled.reject两个过程:padding -> fulfilled.padding -> rejected当pending为rejectd时,会进 ...
- Quartz.Net 组件的封装使用Quartz.AspNetCore
Quartz.Net 组件的封装使用 Quartz.Net是面向.NET的一款功能齐全的开源作业调度组件,你可以把它嵌入你的系统中实现作业调度,也可以基于Quartz.Net开发一套完整的作业调度系统 ...
- HTML 5 学习第二课
元素:<p>+++++++++</P> 全部内容 标签:<P></P> 属性:标签内部的内容 eg:<img src=" "& ...
- Java 操作Oracle数据库
import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import ...
- (29)Vim 5
Vim显示行号方法详解1.编辑时显示行号 在命令模式下输入":set nu"即可显示每一行的行号 如果想要取消行 号,则再次输入":set nonu"即可.2. ...
- go语言常见面试题
前言 从网上找了一些面试题,觉得有意思的我都记录下来,自己学习和大家一起学习吧. 有些初级的题目只放答案,一些值得探讨的问题我会写上我自己的分析过程,希望大家多多交流. 原文链接 选择题 1.[初级] ...
- 翻译:《实用的Python编程》01_01_Python
目录 | 下一节 (1.2 第一个程序) 1.1 Python Python 是什么? Python 是一种解释型(译者注:区别于编译型)的高级语言, 通常被归类为 "脚本语言" ...
- Python 往Excel写数据
一.需求描述: 1.一张人员信息表中生成人员信息,某些列的字段要进行递增操作: 2.一个组织节点下存在1000人的限制要求: 3.一张Excel表格生成45000条数据: 二.Excel表格的表头如下 ...
- Java15变量竟然没什么区别,八大基本数据类型你知道吗?
变量是什么? 变量是用来为不同数据类型在内存中分配的空间用来储存该数据. 不同于python这样的弱类型语言,变量声明不需要定义数据类型,就和写数学方程式一般,谁等于谁即可.而Java这个发展了多个版 ...
- 服务注册与发现-Eureka (高可用设计)
什么是高可用 部署需要考虑的是什么: 1.系统遇到单点失效问题,如何能够快速切换到其他节点完成任务 2.如何应对网络故障,即系统如何设计成"故障开放型"(expecting fai ...