如标题,之前在某个地方看到因为有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. PHP 发送get请求

    PHP 发送get请求 file_get_contents 方法: $s = file_get_contents("http://apis.map.qq.com/ws/distance/v1 ...

  2. ES6入门一：ES6简介及Babel转码器

    ES6简介 Babel转码器 Nodejs中使用ES6 WebPack中使用ES6及Babel转码插件 一.ES6简介与转码  1.1一个常见的问题,ECMAScript和JavaScript到底是什 ...

  3. RHEL7.2 安装Hadoop-2.8.2

    创建三台虚拟机,IP地址为:192.168.169.101,192.168.169.102,192.168.169.103 将192.168.169.102为namenode,192.168.169. ...

  4. Linux下的磁盘分区,和创建文件系统(理论及实战)

    首先我们先了解一下磁盘的原理 磁盘的数据结构有: 扇区:盘片被分为多个扇形区域,每一个扇区存放512个字节的数据 磁道:同一个盘片不同半径的同心圆 柱面:不同盘片相同半径构成的圆柱面 公式: 磁盘存储 ...

  5. Python自动化办公之操作Excel文件

    模块导入 import openpyxl 读取Excel文件 打开Excel文件 workbook = openpyxl.load_workbook("test.xlsx") 输出 ...

  6. location 优先级

    ###我只是个搬运工 规则 等号类型(=)的优先级最高.一旦匹配成功,则不再查找其他匹配项 前缀普通匹配(^~)优先级次之.不支持正则表达式.使用前缀匹配,如果有多个location匹配的话,则使用表 ...

  7. linux alias（命令别名）

    alias:获取定义的所有命令别名 alias NAME='COMMAND':定义别名 unalias NAME:撤销别名

  8. Stream系列（九）Collector方法使用

    toMap toList toCollection joining 视频讲解:https://www.bilibili.com/video/av77800638/ EmployeeTestCase.j ...

  9. wincap linux部署

    1.4.1 linux下安装Winpcap a) 下载Winpcap的源码:https://www.winpcap.org/devel.htm b) 上传源码包“WpcapSrc_4_1_3.zip” ...

  10. Winows下安装RabbitMQ

    RabbitMQ的简介 RabbitMQ是一套开源(MPL)的消息队列服务软件,是由 LShift 提供的一个 Advanced Message Queuing Protocol (AMQP) 的开源 ...