js读取文件并展示内容（FileReader）

本文主要是介绍js读取文件并展示内容（FileReader），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文件形式：txt

实现：

<template>
    <div class="hello">
        <h1>This is a show file page</h1>
        <h3>导入文件：<input type="file" name="file" @change="showFile($event)" /> </h3><br>
        <textarea v-model="input_text" name="" cols="100" rows="20" placeholder="输入……"></textarea><br><br>
    </div>
</template>

<script>
    export default {
        name: "Hello",
        data: function() {
            return {
                input_text: ''
            }
        },
        methods: {

            showFile(input) {
                //支持chrome IE10
                if (window.FileReader) {
                    var file = input.target.files[0];
                    var reader = new FileReader();
                    reader.onload=((event)=>{
                        this.input_text=event.target.result; // 文件的内容
                        console.log(String(event.target.result))
                        let temp = JSON.stringify(event.target.result).split('\\r\\n')
                        temp[0] = temp[0].substr(1)
                        let lastIndex = temp.length-1
                        temp[lastIndex] = temp[lastIndex].substr(0,temp[lastIndex].length-1)

                    })
                    reader.readAsText(file);
                }
                else {
                    alert("FileReader Not supported by your browser!");
                }
            }
        }
    }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h3 {
        margin: 40px 0 0;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    li {
        display: inline-block;
        margin: 0 10px;
    }
    a {
        color: #42b983;
    }
</style>

这篇关于js读取文件并展示内容（FileReader）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！