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打开本地文件(参 ...
随机推荐
- C++ Primer Plus读书笔记(五)循环和关系表达式
1.前缀运算符的优先级是从右到左,例如: 1 *++p; //这句话的含义是先对p进行++,再取* 2.循环 c++11新增了一种循环方式,有点和python类似,如下: 1 array<int ...
- Vue中双向数据绑定是如何实现的?
vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变:核心:关于VUE双向数据绑定,其核心是 Ob ...
- Redis 实战 —— 10. 实现内容搜索、定向广告和职位搜索
使用 Redis 进行搜索 P153 通过改变程序搜索数据的方式,并使用 Redis 来减少绝大部分基于单词或者关键字进行的内容搜索操作的执行时间. P154 基本搜索原理 P154 倒排索引 (in ...
- UVA11694 Gokigen Naname题解
目录 写在前面 Solution Code 写在前面 UVA的题需要自己读入一个 \(T\) 组数据,别被样例给迷惑了 Solution 每个格子只有两种填法且 \(n \le 7\),暴力搜索两种填 ...
- Android webview 问题记录
1. Android 7.1真机安装调试apk时报错,解析安装包失败 原因:sdk版本不支持7.1版本,需要调整minSdkVersion等参数,支持低版本 解决方法: android { compi ...
- 一:整合shiro
整合shiro 1.原生的整个 1.1 创建项目 1.2 创建Realm 1.3 配置shiro 2.使用Shiro Starter 2.1 项目创建 2.2 创建Realm 2.3 配置Shiro ...
- Django(静态文件or路由)
静态文件 在开发中同创会使用到 css,js,img等静态文件,这里带大家简单的介绍一下django如何处理静态页面, 配置 setting.py文件 STATIC_URL = '/static/' ...
- c++指针 c指针 改变值
1. #include <iostream>using namespace std;void move(int *p) ====>void move(*&p){ ...
- 飞塔创建IPSec
5.2和5.4版本飞塔建立IPSec VPN时,必须在两端添加完策略.路由后IPSec才会起来.
- Manacher(马拉车)算法详解
给定一个字符串,求出其最长回文子串 eg: abcba 第一步: 在字符串首尾,及各字符间各插入一个字符(前提这个字符未出现在串里). 如 原来ma /* a b a b c ...