html5文件读取+按钮样式重置+文件内容预览

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;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("
")
                            console.log(this.result)
                        }
                    }    
                }
            }
        })
    </script>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xyyt/p/9067222.html