如标题,之前在某个地方看到因为有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)的更多相关文章

  1. Node.js + gulp 合并静态页模版，文件更新自动热重载。浏览器可预览

    github地址:https://github.com/Liaozhenting/template 使用的是ejs的语法.其实你用什么文件后缀都可以,都是按ejs来解析. 模板文件放在componen ...

  2. 使用FileReader实现前端图片预览

    在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片元素的src属性. 这种方法的缺点是:必须要先把图片上传到服务器.那么问题来了 ...

  3. VS Code 如何直接在浏览器中预览页面

    VS Code 预览html页面的时候,默认需要在资源管理器中显示,再在浏览器中预览.今天介绍一下如何直接预览html页面. 方法一:自己配置快捷键 1.ctrl + shift + p 或者 F1  ...

  4. sublime text3 自己定义的不同浏览器的预览快捷键

    sublime text3 自己定义的不同浏览器的预览快捷键突然全部失效了,搞到现在一直没闹清楚怎么回事,翻看插件发现SideBarEnhancements这插件刚更新了,快捷键也是依赖这个插件弄得. ...

  5. sublime text2-text3 定义的不同浏览器的预览快捷键

    sublime text3 自己定义的不同浏览器的预览快捷键突然全部失效了,搞到现在一直没闹清楚怎么回事,翻看插件发现SideBarEnhancements这插件刚更新了,快捷键也是依赖这个插件弄得. ...

  6. 文件批量上传-统一附件管理器-在线预览文件(有互联网和没有两种)--SNF快速开发平台3.0

    实际上在SNF里使用附件管理是非常简单的事情,一句代码就可以搞定.但我也要在这里记录一下统一附件管理器能满足的需求. 通用的附件管理,不要重复开发,调用尽量简洁. 批量文件上传,并对每个文件大小限制, ...

  7. Windows-快速预览文件-QuickLook

    开源.免费的文件快速预览工具, 支持图片.文档.音视频.代码文本.压缩包等多种格式. 获得 Mac OS 空格键快速预览文件相同的体验 效果图 文件夹 音视频 浏览 压缩包,文本 支持的格式: 图片: ...

  8. 解决微信官方SDK给出1.4.0等版本没有预览文件(previewFile)等接口

    使用苹果手机测试 调用微信的js-sdk在系统中实现上传.预览附件的功能.在自己的手机测试通过后,直接丢给QA测试了 本以为相安无事了,没想到QA用安卓手机测的时候居然不得,使用的是下载下来的jwei ...

  9. 浏览器在线预览pdf、txt、office文件

    //使用文件预览的原因是:TMD微信浏览器屏蔽掉文件下载链接,只好折中使用文件在线预览功能//要点:1.office文件用微软的插件打开 http://view.officeapps.live.com ...

随机推荐

  1. nyoj 524-A-B Problem (java stripTrailingZeros, toPlainString)

    524-A-B Problem 内存限制:64MB 时间限制:1000ms 特判: No 通过数:2 提交数:4 难度:3 题目描述: A+B问题早已经被大家所熟知了,是不是很无聊呢?现在大家来做一下 ...

  2. rsync同步基本用法

                                                                                                        ...

  3. ZeroC ICE的远程调用框架 代理引用地址

    在官方文档中称为Binding,协议-地址对的绑定.在Proxy模式中,一般地有三个参与者,Proxy,Subject以及RealSubject.Subject定义了Proxy(代理)和RealSub ...

  4. for循环的更多写法

    在看设计模式这本书,遇到一个令人疑惑的for循环语句 for (var i = 0, type;type = ['String', 'Array', 'Number'][i++]) { 代码块 } 比 ...

  5. 小白学习React官方文档看不懂怎么办？3.元素渲染

    直接上代码 const element = <h1>Hello, world</h1>; ReactDOM.render(     element,      document ...

  6. Redux中间件Redux-thunk的配置

    当做固定写法吧 截图里少一个括号,已代码为主 import {createStore,applyMiddleware,compose} from 'redux' import thunk from ' ...

  7. windows 10 上使用pybind11进行C++和Python代码相互调用 | Interfacing C++ and Python with pybind11 on windows 10

    本文首发于个人博客https://kezunlin.me/post/8b9c051d/,欢迎阅读! Interfacing C++ and Python with pybind11 on window ...

  8. IPv6，无需操作就可升级？

    最近这段时间,5G 出现在你能看到的各种信息里,铺天盖地的宣传提醒着大家新一代互联网的到来.其实早在几年前 5G 就有所提及,可是为什么到现在才开始窜上热门呢?这就涉及到了 IPv6. 或许有不少朋友 ...

  9. 20191010-6 alpha week 1/2 Scrum立会报告+燃尽图 04

    此作业的要求参见[https://edu.cnblogs.com/campus/nenu/2019fall/homework/8749] 一.小组情况 队名:扛把子 组长:迟俊文 组员:宋晓丽 梁梦瑶 ...

  10. 初探SpringMVC，走进SpringMVC的世界

    1.Springmvc入门 1.1.Springmvc是什么 SpringMVC是Spring中的一个组件,目前(2019)在互联网公司用的很多,是必需学习的一门框架技术!SpringMVC用于web ...