如标题,之前在某个地方看到因为有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. 【评测机】评测时报错cc1plus: fatal error: /xx/xx/main.cpp: Permission denied compilation terminated.的解决方法

    事情是这亚子发生的,原本建立评测机的时候就出现过这个问题,但莫名其妙就解决了. 报错的文件路径是位于docker内的,所以本质上这个错误是docker内的没有权限执行相关文件. 原因是centos7中 ...

  2. vc在x64体系的一般传参数方式

    前篇分析过在objc中函数调用传参的一般方式,本篇分析vc在x64体系中的一般传参方式.手头上因为没有64位的vc编译器,只好用windbg看ms自身的函数是怎么样调用的. 首先看两个再熟悉不过的ap ...

  3. 业务领域建模Domain Modeling

    我的工程实践选题为ESP32低功耗的实现,本项目基于ESP32嵌入式开发平台.下文将以需求为基础,对该项目进行领域建模. 一.概念介绍 1.业务建模 1.1 概念介绍 业务建模(Business Mo ...

  4. 安装eclipse血泪史

    从大一到大三,屡次卸掉eclipse又屡次安装上,每次都要卡壳,所以这里开帖贴出自己的血泪史,以帮助大家 首先找一篇安装教程,网上有很多,这里不再赘述.举例 https://blog.csdn.net ...

  5. React-Hook

    import React, { useState } from 'react'; // Hook 写法 function App2 () { const [count,setCount] = useS ...

  6. react-router-dom路由

  7. Windows Server 2008 服务器重启后卡死在Windows Update 页面问题处理

    Windows Update 服务器 服务器是联想RD640 操作系统Windows Server 2008 R2 Enterprise版 补丁版本是SP1 远程windows服务器时,一直处于远程建 ...

  8. Tensorflow的基本使用

    基本使用 使用 TensorFlow, 你必须明白 TensorFlow: • 使用图 (graph) 来表示计算任务. • 在被称之为 会话(Session)的上下文 (context) 中执行图. ...

  9. 关于Go defer的详细使用

    先抛砖引玉defer的延迟调用:defer特性: . 关键字 defer 用于注册延迟调用. . 这些调用直到 return 前才被执.因此,可以用来做资源清理. . 多个defer语句,按先进后出的 ...

  10. 【Android - IPC】之Serializable和Parcelable序列化

    1.序列化的目的 (1)永久的保存对象数据(将对象数据保存到文件或磁盘中): (2)通过序列化操作将对象数据在网络上进行传输(由于网络传输是以字节流的方式对数据进行传输的,因此序列化的目的是将对象数据 ...