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读取，会产生乱码，因此不是最理想的读取文件的方式。

示例代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <style>

            .btn-info {

                cursor: pointer;

                width: 88px;

                height: 36px;

                line-height: 36px;

                color: #fff;

                background-color: #5bc0de;

                border-color: #46b8da;

                border: 1px solid transparent;

                border-radius: 4px;

            }

        </style>

        <title></title>

    </head>

    <body>

        <div id="app">

            <div class="fileBtn">

                <form id="uploadForm" action="" method="post" enctype="multipart/form-data">

                    <input type="file" name="uploadFile" id="uploadFile" @change="readFile" style="visibility:hidden;position:absolute;top:0px;width:0px" />

                    <!--隐藏默认标签样式-->

                </form>

                <input type="button" class="btn btn-info" value="导入文档" @click="clickUploadBtn" /> 支持.txt .doc .xls .cvs等文件格式

            </div>

            <article>

                <h4>上传文档预览</h4>

                <ul style="list-style: none;">

                    <li v-for="i in fileData">{{i}}</li>

                </ul>

                <h4>上传图片预览</h4>

                <div><img :src="imgData"></div>

            </article>

        </div>

    </body>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>

        Vue.config.silent = false;

        Vue.config.devtools = true;

        var app = new Vue({

            el: '#app',

            data: {

                fileData: [],

                imgData:""

            },

            created: function() {},

            mounted: function() {},

            methods: {

                /**

                 * 上传按钮单击事件

                 */

                clickUploadBtn: function() {

                    //触发file的点击事件

                    document.getElementById("uploadFile").click()

                },

                readFile: function() {

                    var inputBox = document.getElementById("uploadFile");

                    var fileName=inputBox.value;

                    var fileType;

                    var regImg=/(?:jpg|gif|png|jpeg)$/;

                    var reader = new FileReader();

                    var self=this;

                    //发起异步请求

                    if(regImg.test(fileName)){

                        //图片格式文件

                        reader.readAsDataURL(inputBox.files[0]);

                        reader.onload = function() {

                            self.imgData=this.result

                            console.log(this.result)

                        }

                    }else{

                        //其他文档 格式(utf-8编码格式)

                        reader.readAsText(inputBox.files[0], "utf-8");

                        reader.onload = function() {

                            //读取完成后，数据保存在对象的result属性中

                            self.fileData = this.result.split("\n")

                            console.log(this.result)

                        }

                    }

                }

            }

        })

    </script>

</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. VC中链接错误，提示string重定义

    VC链接错误,说是string已经有了实现了,只要 rebuild 一下好了. Linking...LINK : warning LNK4075: ignoring '/EDITANDCONTINUE ...

  2. Photoshop 辅助线和标尺的使用技巧

    1.拖动辅助线时按住Alt键可以在水平辅助线和垂直辅助线之间切换.按住Alt键点击一条已经存在的垂直辅助线可以把它转为水平辅助线,反之亦然. 注意:辅助线是通过从标尺中拖出而建立的,所以要确保标尺是打 ...

  3. 机器学习进阶-背景建模-(帧差法与混合高斯模型) 1.cv2.VideoCapture(进行视频读取) 2.cv2.getStructureElement(构造形态学的卷积) 3.cv2.createBackgroundSubtractorMOG2(构造高斯混合模型) 4.cv2.morpholyEx(对图像进行形态学的变化)

    1. cv2.VideoCapture('test.avi') 进行视频读取 参数说明:‘test.avi’ 输入视频的地址2. cv2.getStructureElement(cv2.MORPH_E ...

  4. elasticsearch-cluster shards

    elasticsearch-cluster: Windows下本地测试用 创建集群就要给集群起名,修改 elasticsearch.yml文件. cluster.name: es_test //集群名 ...

  5. Dos命令快速设置ip、网关、dns地址

    netsh interface ip set address name="本地连接" source=static 192.168.1.8 255.255.255.0 192.168 ...

  6. tar 打包当前目录下文件但不包括该录

    今天想打包一些文件,但是不想把该目录打包进去 比如我想把test目录下文件打个包,安装正常的命令来 tar zcf test.tar.gz test 这样肯定会把test目录也打进去,解压后肯定是te ...

  7. delphi删除整个目录及目录下的文件

    //删除整个文件夹及其下的所有文件function DelDirAll(aDir: string): Boolean; var vSearch: TSearchRec; vRet: integer; ...

  8. 16.0 Auth0注册与设置

    首先呢?注册https://manage.auth0.com 填写回调网页,意思是当我们点sign in 那个按钮的时候 会访问这个官网 这个官网又回调下面的网页,不然会报错.这个网站因为我们是开发所 ...

  9. javascript:getElementsByName td name

    问题:    今天写动态生成HTML表格的时候需要用到统计td内的数据,在生成的时候设置了td的name属性,但是document.getElementsByName("tdname&quo ...

  10. C# Excel To DataTable

    原地址忘了 需引用NPOI,引用方法:项目引用那儿右键 => 管理NuGet程序包 => 游览 =>输入NPOI =>选中NPOI后安装(一般是第一个) /// <sum ...