使用FileReader在浏览器读取预览文件(image和txt)
如标题,之前在某个地方看到因为有Blob的存在,理论上可以在浏览器上查看所有格式的文件.自己想着试试现在暂时只能够查看图片和预览txt文件.其他的比如doc,docx格式的文件查看的时候是乱码
如图:可以多选照片查看,可以查看txt文件
不说多了,主要是利用filereader读取blob转成base64或者直接读取文本然后展示.代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="file" id="file1" multiple="multiple">
<div id="showArea" style="width: 500px;height: 500px;border: #0066CC 1px solid;">
</div>
<textarea rows="30" cols="80" id="textarea">
</textarea>
</body>
<script type="text/javascript">
/* ArrayBuffer, Blob对象(二进制文件) 和 字符串, base64(ASCII码) 之间的相互转换/单向转换, */
// 文件读取器 FileReader
// FileReader 只接受 File 或 Blob 类型的数据(事实上 File 也 Blob 的一种)
// 1.Blob类型
const filereader = new FileReader();
const blob = new Blob(['hello file-reader'], { type: 'text/plain'});
filereader.onload = e => {
console.log(e.target.result); // 输出 data:text/plain;base64,aGVsbG8gZmlsZS1yZWFkZXI=
var txt = new File();
}
// filereader.readAsDataURL(blob);
// 2. File类型
let file1DOM = document.querySelector('#file1');
file1DOM.onchange = function(){
console.log(this.files)
let file1 = this.value
var fileReaders = []
for(var i = 0;i<this.files.length;i++){
console.log(this.files[i].type)
fileReaders[i] = new FileReader();
var fileType = this.files[i].type.split('/')[0]
if(fileType == 'image'){
fileReaders[i].readAsDataURL(this.files[i])
fileReaders[i].onload = function(e) {
var image = new Image();
image.setAttribute('src',e.target.result)
image.setAttribute('width',200)
image.onload = function() {
document.querySelector('#showArea').appendChild(this)
}
}
} else if(fileType == 'text'){
fileReaders[i].readAsText(this.files[i])
fileReaders[i].onload = function(e){
document.querySelector('#textarea').value = e.target.result
}
}
}
}
</script>
</html>
试过利用filereader的readastext()读取docx,但是读取出来格式是application/vnd.openxmlformats-officedocument.wordprocessingml.document,读取出来也是乱码.大概是编码问题.试了试别的编码方式GB2312,GBK没有用,都是乱码.先放放,有空了再看看
使用FileReader在浏览器读取预览文件(image和txt)的更多相关文章
- Node.js + gulp 合并静态页模版，文件更新自动热重载。浏览器可预览
github地址:https://github.com/Liaozhenting/template 使用的是ejs的语法.其实你用什么文件后缀都可以,都是按ejs来解析. 模板文件放在componen ...
- 使用FileReader实现前端图片预览
在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片元素的src属性. 这种方法的缺点是:必须要先把图片上传到服务器.那么问题来了 ...
- VS Code 如何直接在浏览器中预览页面
VS Code 预览html页面的时候,默认需要在资源管理器中显示,再在浏览器中预览.今天介绍一下如何直接预览html页面. 方法一:自己配置快捷键 1.ctrl + shift + p 或者 F1 ...
- sublime text3 自己定义的不同浏览器的预览快捷键
sublime text3 自己定义的不同浏览器的预览快捷键突然全部失效了,搞到现在一直没闹清楚怎么回事,翻看插件发现SideBarEnhancements这插件刚更新了,快捷键也是依赖这个插件弄得. ...
- sublime text2-text3 定义的不同浏览器的预览快捷键
sublime text3 自己定义的不同浏览器的预览快捷键突然全部失效了,搞到现在一直没闹清楚怎么回事,翻看插件发现SideBarEnhancements这插件刚更新了,快捷键也是依赖这个插件弄得. ...
- 文件批量上传-统一附件管理器-在线预览文件(有互联网和没有两种)--SNF快速开发平台3.0
实际上在SNF里使用附件管理是非常简单的事情,一句代码就可以搞定.但我也要在这里记录一下统一附件管理器能满足的需求. 通用的附件管理,不要重复开发,调用尽量简洁. 批量文件上传,并对每个文件大小限制, ...
- Windows-快速预览文件-QuickLook
开源.免费的文件快速预览工具, 支持图片.文档.音视频.代码文本.压缩包等多种格式. 获得 Mac OS 空格键快速预览文件相同的体验 效果图 文件夹 音视频 浏览 压缩包,文本 支持的格式: 图片: ...
- 解决微信官方SDK给出1.4.0等版本没有预览文件(previewFile)等接口
使用苹果手机测试 调用微信的js-sdk在系统中实现上传.预览附件的功能.在自己的手机测试通过后,直接丢给QA测试了 本以为相安无事了,没想到QA用安卓手机测的时候居然不得,使用的是下载下来的jwei ...
- 浏览器在线预览pdf、txt、office文件
//使用文件预览的原因是:TMD微信浏览器屏蔽掉文件下载链接,只好折中使用文件在线预览功能//要点:1.office文件用微软的插件打开 http://view.officeapps.live.com ...
随机推荐
- 基于 cobbler 实现自动安装 linux 系统
使用 cobbler 实现自动安装 centos 6.7系统 1.yum install cobbler -y 安装 cobbler ,有依赖关系,会自动把 TFTP .HTTP 服务安装上:cobb ...
- 领扣（LeetCode）字母大小写全排列 个人题解
给定一个字符串S,通过将字符串S中的每个字母转变大小写,我们可以获得一个新的字符串.返回所有可能得到的字符串集合. 示例: 输入: S = "a1b2" 输出: ["a1 ...
- Python算法——《算法图解》笔记
算法目录 二分查找 大O表示法 选择排序 递归 快速排序,分而治之(D&C) 散列表——字典 广度优先搜索——BFS Dijkstra算法 贪婪算法 二分查找 # 要求list是有序表,num ...
- GeoServer 查询sql视图
说明: 最近项目中遇到一个需求,需要统计管网的长度,但管网数据量非常大,前端用openlayers接口统计直接就奔溃了. 后尝试使用调后台接口查数据库的方式,虽然可行但是又要多一层与后台交互的工作. ...
- 【python测试开发栈】python内存管理机制（一）—引用计数
什么是内存 在开始进入正题之前,我们先来回忆下,计算机基础原理的知识,为什么需要内存.我们都知道计算机的CPU相当于人类的大脑,其运算速度非常的快,而我们平时写的数据,比如:文档.代码等都是存储在磁盘 ...
- element 根据某一个属性合并列
通过 span-method 绑定方法 objectSpanMethod方法 this.getSpanArr(this.tableData); //this.tableData 指接口取到的数据 // ...
- vue computed计算属性 watch监听
计算属性 computed:{ 变量:function(){ return 计算好的值 } } 这时候计算好的值 就付给了你的变量 在实例中可以this.使用 注意 声明的变量的data中不可以重复声 ...
- 程序员实用工具，推荐一款代码统计神器GitStats
阅读全文需7分钟,工具很实用. 1. 前言 对于Git项目开发,有一些可视化的工具,如gitk,giggle等,来查看项目的开发历史.但对于大型的项目,这些简单的可视化工具远远不足以了解项目完整的开发 ...
- day20191010ClassNotes
笔记: 1.DAO模式组成部分: 程序 ----> 数据库 实体类 数据库中的表 工具类:公共的数据库连接.关闭.公共的增删改.查询 接口 : 程序提倡的是面向接口编程,从而降低程序的耦合性 实 ...
- 感觉async await 异步编程 并不能提升性能?
我有2个方法 代码相同 都是执行上传文件IO操作 一个同步 一个异步 接着我用POSTMAN 分别用200个线程 去同时测试2个接口 结果很意外 2个接口 同时执行完成的速度 异步更慢 之前经常看别人 ...