如标题,之前在某个地方看到因为有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. 力扣（LeetCode）验证回文串 个人题解

    给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写. 说明:本题中,我们将空字符串定义为有效的回文串. 示例 1: 输入: "A man, a plan, a c ...

  2. java中的string对象深入了解

    这里来对Java中的String对象做一个稍微深入的了解. Java对象实现的演进 String对象是Java中使用最频繁的对象之一,所以Java开发者们也在不断地对String对象的实现进行优化,以 ...

  3. 微信小程序 子组件给父组件传参

    子组件给父组件传参只需这4步: 子组件的两步: 1.子组件绑定函数 addInfo <button type="primary" bindtap="addInfo& ...

  4. sublime插件开发教程2

    直接进入正题 先新建个chajian.py python写起 import sublime import sublime_plugin class ExampleCommand(sublime_plu ...

  5. nginx常用模块（三）

    Nginx常用模块(三) ngx_http_proxy_module模块配置(http或https协议代理) proxy_pass URL; 应用上下文:location, if in locatio ...

  6. LAMP架构介绍、MySQL、MariaDB介绍、MySQL安装

    5月23日任务 课程内容: 11.1 LAMP架构介绍11.2 MySQL.MariaDB介绍11.3/11.4/11.5 MySQL安装扩展mysql5.5源码编译安装 http://www.ami ...

  7. 【BZOJ2190】【Luogu P2158】 [SDOI2008]仪仗队

    前言: 更不好的阅读 这篇题解真的写了很久,改了又改才成为这样的,我不会写题解但我正在努力去学,求通过,求赞... 题目: BZOJ Luogu 思路: 像我这样的数论菜鸡就不能一秒切这题,怎么办呢? ...

  8. Linux命令行初学（一）

    linux命令大全:https://www.linuxcool.com/ 大概了解到有哪些命令,如果有需要的话可以在该网站上查询. 另外在实验楼学习了一些基础,该篇博客就此次对linux命令行的学习进 ...

  9. UML类图绘制

    UML图简介 含义:UML-Unified Modeling Language 统一建模语言,又称标准建模语言.是用来对软件密集系统进行可视化建模的一种语言 主要模型: 功能模型:从用户的角度展示系统 ...

  10. “智慧海绵城市”(SSC)监测评价体系整体解决方案

    一.方案简介 无论是内涝防治.黑臭水体治理,还是海绵城市规划设计及建设.评估,乃至未来智慧城市的建设,都需要有全面.致密.大量的城市水文监测数据和先进模拟仿真技术作基础支撑,唯有如此,决策才有据可依, ...