如标题,之前在某个地方看到因为有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 94-cigarettes (分清楚，那一部分的cigarettes是用过的，那一部分是没有用过的)

    94-cigarettes 内存限制:64MB 时间限制:3000ms 特判: No 通过数:13 提交数:20 难度:2 题目描述: Tom has many cigarettes. We hypo ...

  2. SecureCRT 多个会话显示在同一窗口

  3. 0MQ 事件驱动 以及 poller

    底层IO事件,以及借用socket poller的上层0MQ socket事件. 先来看用于底层和上层的两种poller. 这是用于底层io事件的poller_t,每个socket_base_t都关联 ...

  4. 找到了element, 但是用getText却得到空值，取不到文本的解决办法

    最近代码中发现一些bug, 在Debug过程中发现,页面元素是被定位到了,但是用getText方法取到的却是空值.调查了一下发现,getText是否返回值和isDisplayed是否为true有关.当 ...

  5. webpack-dev-middleware 和 webpack-hot-middleware 配置开发环境和生产环境；webpack脚手架；仿vue-cli

    webpack-dev-server更新后自带express服务器,已经不需要自己搭建.vue-cli从17年底左右也换成了最新的webpack-dev-server,而不是用webpack-dev- ...

  6. 2019-9-28：渗透测试，基础学习，DNS投毒

    该文章仅供学习,利用方法来自网络文章,仅供参考 DNS劫持 目标机:虚拟机下的win7系统 目标ip:192.168.20.131 目标:使用ettercap进行apr投毒,对win7系统就行,DNS ...

  7. docker容器访问宿主机的IP——以rocketmq管理工具为例

    在宿主机(MacOS系统)上运行了原生的RocketMQ服务,为了方便管理,需要以Docker方式运行RocketMQ的管理工具——rocketmq-console (项目地址:https://git ...

  8. JSONPath入门之Snack3篇

    Snack3 for java 一个微型JSON框架 基于jdk8,60kb.有序列化反序列化.解析和转换.支持 Json path 查询. <dependency> <groupI ...

  9. ios webp转换jpg

    在项目开发的过程中,遇到了一个问题,就是webp的图片,先解释一下webp是啥,webp是谷歌开发的一种旨在加快图片加载速度的图片格式.图片压缩体积大约只有JPEG的2/3,说白了就是省空间,特别对于 ...

  10. PHP数组总汇

    数组,顾名思义,本质上就是一系列数据的组合.在这个组合中,每个数据都是独立的,可以对每个单独的数据进行分配和读取.PHP对数据的操作能力非常强大,尤其是PHP为程序开发人员提供了大量方便.易懂的数组操 ...