使用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 ...
随机推荐
- CSS中越界问题的经典解决方案
(1)如何解决父元素的第一个子元素的margin-top越界问题 1)为父元素加border-top: 1px;——有副作用 2)为父元素指定padding-top: 1px;——有副作用 3)为父元 ...
- ArcGIS API For Javascript ：读取 CSV 文件的方法
我们临时会遇到一些测试数据,通常从数据库中以 CSV 格式导出.最简单实用的方法就是使用 ajax 去读取文件,记得引入 jQuery . 例如,在<ArcGIS JS API :新增一个热力图 ...
- django_5：表单1
CSRF( Cross Site Request Forgery)跨站点请求欺骗 方法一. {% csrf_token %} 方法二.在setting.py中注释掉MIDDLEWARE中的'djang ...
- opencv 6 图像轮廓与图像分割修复 1 查找并绘制轮廓 寻找物体的凸包
查找并绘制轮廓 寻找轮廓(findContours)函数 绘制轮廓(drawContours()函数) 基础实例程序:轮廓查找 #include <opencv2/opencv.hpp> ...
- vant-ui的van-area使用
由于官方例子中并没有太多详情,因此记录之,方便以后使用. 1.配置 :area-list="areaList",以初始化全部省市区的数据,其中area.js文件在官方可以下载,放于 ...
- zip的压缩和解压命令
以下命令均在/home目录下操作cd /home #进入/home目录 1.把/home目录下面的data目录压缩为data.zip zip -r data.zip data #压缩data目录 ...
- react antd Table动态合并单元格
示例数据 原始数组 const data = [ { key: '0', name: 'John Brown', age:22, address: 'New York No. 1 Lake Park' ...
- Nginx 本地建立负载均衡（Windows环境）
需求: 现在有个需求:两台服务器,建立负载均衡. A服务器:IP:localhost:负载均衡主服务器:代理本地文件夹D:\\SampleData B服务器:IP:10.10.10.10:代理本地文件 ...
- Component 和 PureComponent 的区别；复制demo，肉眼可以的区别
React.PureComponent它用当前与之前 props 和 state 的浅比较覆写了 shouldComponentUpdate() 的实现.简单来说,就是PureComponent简单实 ...
- 像黑客一样写博客–Pelican快速搭建静态博客
"像黑客一样写博客",通过文本编辑器(Markdown编辑器)即可实现写博客,而且是静态的,很神奇吧,这里的方案是Pelican. 为啥叫 Pelican 这么奇怪的名字 &quo ...