FileReader读取文件详细介绍请访问：http://www.cnblogs.com/xyyt/p/9066882.html

FileReader提供了如下方法：

readAsArrayBuffer(file) 按字节读取文件内容，结果用ArrayBuffer对象表示
readAsBinaryString(file) 按字节读取文件内容，结果为文件的二进制串
readAsDataURL(file) 读取文件内容，结果用data:url的字符串形式表示
readAsText(file,encoding) 按字符读取文件内容，结果用字符串形式表示
abort() 终止文件读取操作

readAsDataURL和readAsText较为常用，这里以这两个为例，说明具体使用方法：

1.readAsDataURL：readAsDataURL会将文件内容进行base64编码后输出。

由于媒体文件的src属性，可以通过采用网络地址或base64的方式显示，因此我们可以利用readAsDataURL实现对图片的预览。

2.readAsText:导入文档格式文件，默认按Utf-8格式读取，其他格式需要设置编码格式：

readAsText(file,encoding)可按指定编码方式读取文件，但读取文件的单位是字符，故对于文本文件，只要按规定的编码方式读取即可；而对于媒体文件（图片、音频、视频），其内部组成并不是按字符排列，故采用readAsText读取，会产生乱码，因此不是最理想的读取文件的方式。

示例代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <style>
  7.             .btn-info {
  8.                 cursor: pointer;
  9.                 width: 88px;
  10.                 height: 36px;
  11.                 line-height: 36px;
  12.                 color: #fff;
  13.                 background-color: #5bc0de;
  14.                 border-color: #46b8da;
  15.                 border: 1px solid transparent;
  16.                 border-radius: 4px;
  17.             }
  18.         </style>
  19.         <title></title>
  20.     </head>
  21.  
  22.     <body>
  23.         <div id="app">
  24.             <div class="fileBtn">
  25.                 <form id="uploadForm" action="" method="post" enctype="multipart/form-data">
  26.                     <input type="file" name="uploadFile" id="uploadFile" @change="readFile" style="visibility:hidden;position:absolute;top:0px;width:0px" />
  27.                     <!--隐藏默认标签样式-->
  28.                 </form>
  29.                 <input type="button" class="btn btn-info" value="导入文档" @click="clickUploadBtn" /> 支持.txt .doc .xls .cvs等文件格式
  30.             </div>
  31.             <article>
  32.                 <h4>上传文档预览</h4>
  33.                 <ul style="list-style: none;">
  34.                     <li v-for="i in fileData">{{i}}</li>
  35.                 </ul>
  36.                 <h4>上传图片预览</h4>
  37.                 <div><img :src="imgData"></div>
  38.             </article>
  39.         </div>
  40.     </body>
  41.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  42.     <script>
  43.         Vue.config.silent = false;
  44.         Vue.config.devtools = true;
  45.         var app = new Vue({
  46.             el: '#app',
  47.             data: {
  48.                 fileData: [],
  49.                 imgData:""
  50.             },
  51.             created: function() {},
  52.             mounted: function() {},
  53.             methods: {
  54.                 /**
  55.                  * 上传按钮单击事件
  56.                  */
  57.                 clickUploadBtn: function() {
  58.                     //触发file的点击事件
  59.                     document.getElementById("uploadFile").click()
  60.                 },
  61.                 readFile: function() {
  62.                     var inputBox = document.getElementById("uploadFile");
  63.                     var fileName=inputBox.value;
  64.                     var fileType;
  65.                     var regImg=/(?:jpg|gif|png|jpeg)$/;
  66.                     var reader = new FileReader();
  67.                     var self=this;
  68.                     //发起异步请求
  69.                     if(regImg.test(fileName)){
  70.                         //图片格式文件
  71.                         reader.readAsDataURL(inputBox.files[0]);
  72.                         reader.onload = function() {
  73.                             self.imgData=this.result
  74.                             console.log(this.result)
  75.                         }
  76.                     }else{
  77.                         //其他文档 格式(utf-8编码格式)
  78.                         reader.readAsText(inputBox.files[0], "utf-8");
  79.                         reader.onload = function() {
  80.                             //读取完成后，数据保存在对象的result属性中
  81.                             self.fileData = this.result.split("\n")
  82.                             console.log(this.result)
  83.                         }
  84.                     }
  85.                 }
  86.             }
  87.         })
  88.     </script>
  89. </html>

html5文件读取+按钮样式重置+文件内容预览的更多相关文章

  1. nio实现文件读取写入数据库或文件

    1.nio实现读取大文件,之后分批读取写入数据库 2.nio实现读取大文件,之后分批写入指定文件 package com.ally; import java.io.File; import java. ...

  2. SpringBoot读取Linux服务器某路径下文件\读取项目Resource下文件

    // SpringBoot读取Linux服务器某路径下文件 public String messageToRouted() { File file = null; try { file = Resou ...

  3. 使用java的 htpUrlConnection post请求 下载pdf文件，然后输出到页面进行预览和下载

    使用java的 htpUrlConnection post请求 下载pdf文件,然后输出到页面进行预览和下载 2018年06月07日 10:42:26 守望dfdfdf 阅读数:235 标签: jav ...

  4. FileUpload控件实现单按钮图片自动上传并带预览显示

    FileUpload控件实现单按钮图片自动上传并带预览显示 1.实现原理:   FileUpload控件默认不支持服务端的ONCHANGE事件,此时用一种变通的方法借用客户端的onchange事件,调 ...

  5. Vue.js +pdf.js 处理响应pdf文件流数据，前端转图片预览不可下载

    使用场景及原因 实际业务中,一些说明书或协议仅支持用户在线预览,为避免用户自行下载,并进行修改,引发纠纷,特将文件已文件流的形式,传给前端并转为图片显示,此时可能会有人问,为什么不直接在后端转图片,前 ...

  6. [java]文件上传下载删除与图片预览

    图片预览 @GetMapping("/image") @ResponseBody public Result image(@RequestParam("imageName ...

  7. python自动化之上传文件的3种方法和图片预览

    ajax上传文件的三种方法 第一种xhr提交 function xhrSubmit(){ // $('#fafafa')[0] var file_obj = document.getElementBy ...

  8. Java 文件本地上传、下载和预览的实现

    以下方法为通用版本 实测图片和pdf 都没有问题 上传方法需要前端配合post请求 ,下载前端用a标签就可以,预览 前端使用ifrme标签   ,就可以实现基本功能... 1.文件本地上传 publi ...

  9. input file样式修改，图片预览删除功能

    本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...

随机推荐

  1. 机器学习入门-数值特征-进行二值化变化 1.Binarizer(进行数据的二值化操作)

    函数说明: 1. Binarizer(threshold=0.9) 将数据进行二值化,threshold表示大于0.9的数据为1,小于0.9的数据为0 对于一些数值型的特征:存在0还有其他的一些数 二 ...

  2. day05-if-else语句

    1.Python条件语句 Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块.Python程序语言指定任何非0和非空(null)值为true,0 或者 nu ...

  3. java byte[]与十六进制字符串相互转换

    http://blog.csdn.net/worm0527/article/details/69939307 http://blog.csdn.net/androiddeveloper_lee/art ...

  4. Django--ORM(模型层)--多表(重重点)

    一.数据库表关系 单表 重复的字段太多,所以需要一对多,多对多来简化 多表 多对一 多对多 一对一 =============================================== 一对 ...

  5. Matlab实现BP网络识别字母

    训练样本空间   每个样本使用5×5的二值矩阵表征一个字母.一共10个字母类型,分别是N,I,L,H,T,C,E,F,Z,V.每个字母9个样本.共90个. N1=[1,0,0,0,1; 1,0,0,0 ...

  6. Uni2D 入门 -- Asset Table

    转载 http://blog.csdn.net/kakashi8841/article/details/17686791 Uni2D生成了一个自定义的表格用于保存你资源的唯一ID的引用.这个表格用于更 ...

  7. 处女座与cf-模拟

    链接:https://ac.nowcoder.com/acm/contest/327/B来源:牛客网 题目描述 众所周知,处女座经常通过打cf来调节自己的心情.今天处女座又参加了一场cf的比赛,他知道 ...

  8. bootstrap 参考文档

    https://getbootstrap.com/docs/3.3/css/#sass-installation

  9. 过滤access日志前5条数据

    cat /usr/local/nginx/logs/access.log|awk '{print $1}'|sort|uniq -c|sort -n -r|head -5 找不到的话可以find查找a ...

  10. pyhton笔记（一）：字符编码、变量

    一.什么是python? python是一种面向对象.解释型的计算机语言,它的特点是语法简洁.优雅.简单易学. 编译型语言: 写好代码之后把代码编译成二进制文件,运行时运行编译好的二进制文件.比如C. ...