使用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 ...
随机推荐
- 使用ssh管理远程主机
首先,找两台虚拟机ping通,因为这个实验目的是通过客户端访问服务端. 咱们进入虚拟机后,打开终端,输入命令:rpm -qa | grep openssh 卸载 输入命令: yum remove ...
- nyoj 991 Registration system (map)
Registration system 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 A new e-mail service "Berlandesk&q ...
- nyoj 12-喷水装置（二）(贪心)
12-喷水装置(二) 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:10 submit:30 题目描述: 有一块草坪,横向长w,纵向长为h,在它的橫 ...
- Kibana创建索引成功，但一直不显示出来（Fielddata is disabled on text fields by default. Set fielddata=true........）
现象 把EFK整个集群搭建完成后,通过Kibana操作界面创建索引(如图1),我创建了lile-zabbix*的索引,显示是创建成功了,但是只要我在重新刷新一次,已经创建的索引就“消失了”.后通过查看 ...
- 手把手带你一键部署 Kubernetes + KubeSphere 至 Linux
本文介绍一个最快安装 Kubernetes 和体验 KubeSphere 核心功能的方式,all-in-one 模式可一键安装 Kubernetes v1.15.5 和 KubeSphere 至一台 ...
- python CGI编程---Apache服务安装（2）
一.下载Apache 下载地址:https://www.apachehaus.com/cgi-bin/download.plx 我这里下载第一个,我电脑是window的64位. 下载完成后,解压到 我 ...
- 剑指Offer-29.最小的K个数(C++/Java)
题目: 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. 分析: 最先想到的是将数组升序排列,返回前k个元素.不过排序的话效率 ...
- React躬行记（14）——测试框架
测试不仅可以发现和预防问题,还能降低风险.减少企业损失.在React中,涌现了多种测试框架,本节会对其中的Jest和Enzyme做详细的讲解. 一.Jest Jest是由Facebook开源的一个测试 ...
- 《程序人生》系列-害敖丙差点被开除的P0事故
你知道的越多,你不知道的越多 点赞再看,养成习惯 GitHub https://github.com/JavaFamily上已经收录有一线大厂面试点脑图.个人联系方式和技术交流群,欢迎Star和指教 ...
- day20190911笔记
js_访问节点元素_document系列方法: first_jQuery.html <!DOCTYPE html><html> <head> <meta ch ...