如标题,之前在某个地方看到因为有Blob的存在,理论上可以在浏览器上查看所有格式的文件.自己想着试试现在暂时只能够查看图片和预览txt文件.其他的比如doc,docx格式的文件查看的时候是乱码

如图:可以多选照片查看,可以查看txt文件

不说多了,主要是利用filereader读取blob转成base64或者直接读取文本然后展示.代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8.     <input type="file" id="file1" multiple="multiple">
  9.     <div id="showArea" style="width: 500px;height: 500px;border: #0066CC 1px solid;">
  11.     </div>
  12.     <textarea rows="30" cols="80" id="textarea">
  14.     </textarea>
  15. 	</body>
  16.   <script type="text/javascript">
  17.     /* ArrayBuffer, Blob对象(二进制文件) 和 字符串, base64(ASCII码) 之间的相互转换/单向转换, */
  19.   	// 文件读取器 FileReader
  20.     // FileReader 只接受 File 或 Blob 类型的数据(事实上 File 也 Blob 的一种)
  21.     // 1.Blob类型
  22.     const filereader = new FileReader();
  23.     const blob = new Blob(['hello file-reader'], { type: 'text/plain'});
  24.     filereader.onload = e => {
  25.         console.log(e.target.result); // 输出 data:text/plain;base64,aGVsbG8gZmlsZS1yZWFkZXI=
  26.         var txt = new File();
  27.     }
  28.     // filereader.readAsDataURL(blob);
  29.     // 2. File类型
  30.     let file1DOM = document.querySelector('#file1');
  31.     file1DOM.onchange = function(){
  32.       console.log(this.files)
  33.       let file1 = this.value
  34.       var fileReaders = []
  35.       for(var i = 0;i<this.files.length;i++){
  36.         console.log(this.files[i].type)
  37.         fileReaders[i] = new FileReader();
  38.         var fileType = this.files[i].type.split('/')[0]
  39.         if(fileType == 'image'){
  40.             fileReaders[i].readAsDataURL(this.files[i])
  41.             fileReaders[i].onload = function(e) {
  42.               var image = new Image();
  43.               image.setAttribute('src',e.target.result)
  44.               image.setAttribute('width',200)
  45.               image.onload = function() {
  46.                 document.querySelector('#showArea').appendChild(this)
  47.               }
  48.             }
  49.         } else if(fileType == 'text'){
  50.           fileReaders[i].readAsText(this.files[i])
  51.           fileReaders[i].onload = function(e){
  52.             document.querySelector('#textarea').value =  e.target.result
  53.           }
  54.         }
  55.       }
  56.     }
  57.   </script>
  58. </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. java编程思想第四版第七章习题

    (略) (略) (略) (略) 创建两个带有默认构造器(空参数列表)的类A和类B.从A中继承产生一个名为C的新,并在C内创建一个B类的成员.不要给C编写构造器.创建一个C类的对象并观察其结果. pac ...

  2. pat 1006 Sign In and Sign Out（25 分）

    1006 Sign In and Sign Out(25 分) At the beginning of every day, the first person who signs in the com ...

  3. Redis单节点数据同步到Redis集群

    一:Redis集群环境准备 1:需要先安装好Redis集群环境并配置好集群 192.168.0.113 7001-7003 192.168.0.162 7004-7006 2:检查redis集群 [r ...

  4. php相关知识(一)

    php是服务器端脚本语言.可以生成动态页面内容,可以对数据库中的数据库进行编辑. php变量以$符号开始,后面是变量名,变量名以字母或下划线开始,变量名不能包含空格,变量名区分大小写. php的数据类 ...

  5. 领扣（LeetCode）单调数列 个人题解

    如果数组是单调递增或单调递减的,那么它是单调的. 如果对于所有 i <= j,A[i] <= A[j],那么数组 A 是单调递增的. 如果对于所有 i <= j,A[i]> = ...

  6. SpringBoot让你的Bean动起来(自定义参数解析HandlerMethodArgumentResolver)

    SpringBoot让你的Bean动起来(自定义参数解析HandlerMethodArgumentResolver) 简介 我们 Controller 用到的一些 Bean 需要通过一定的方式去获取的 ...

  7. H5之外部浏览器唤起微信分享

    最近在做一个手机站,要求点击分享可以直接打开微信分享出去.而不是jiathis,share分享这种的点击出来二维码.在网上看了很多,都说APP能唤起微信,手机网页实现不了.也找了很多都不能直接唤起微信 ...

  8. ACE框架 基于共享内存的进程间通讯

    ACE框架将基于共享内存的进程间通讯功能,如其它IO组件或IPC组件一样,设计成三个组件.流操作组件ACE_MEM_Stream,连接器组件ACE_MEM_Connector,以及接收连接组件ACE_ ...

  9. 看淡生死，不服就干（C语言指针）

    看淡生死,不服就干 emmmmm 其实今天蛮烦的 高等数学考的一塌糊涂 会的不会的都没写 真心没有高中轻松了啊 也不知道自己立的flag还能不能实现 既然选择了就一定坚持下去啊 下面还是放一段之前写的 ...

  10. Jrebel 激活的方法

    jrebel  激活的方法: 试了很多都不好用,下面这个方法比较简单快捷.(不知道可以坚持多久) myjrebel 7月分官方正式停用,致使广大朋友无法使用jrebel/XRebel,可按如下地址进行 ...