Html, Vue-- local file upload bomb box + read local file content

I. Introduction

　　In doing page recently, you want to achieve access to information in a local file on a web page, where the record about implementation. Section can be used Hmtl native Jquery methods and ways to achieve the same effect, the comment has been made, but the body is achieved Vue.

　　Test environment: Google browser --79.0.3945.88 (official version) (64)

Second, implementation

1. Display local file upload bomb box

1.1 The most original styles to achieve

code show as below:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
 
</head>
<body>
    <div>
        <input type="file" id="files">
    </div>
    <script>
    </script>
</body>
</html>

effect:

Note: This is just basic style bomb box appears, and can not obtain the selected local file information

1.2 Vue achieve

code show as below:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>

    </head>
    <body>
        <div id="app">
            <input type="button" value="导入" id="fileImport" v-on:click="clickLoad" style="background: green; height: 80px; width: 100px; font-size: 28px;">
            <input type="file" id="files" ref="refFile" style="display: none" v-on:change="fileLoad">
        </div>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
        <script>
            '#app'
                el:Vue ({new=appwas , 
                Data: { 

                }, 
                Methods: { 
                    clickLoad () {
                         // the following three methods to achieve the same effect 
                        // Method a: native HTML 
                        // document.getElementById ( 'Files') the Click ();. 
                        // Method two: jQuery implemented 
                        // $ ( "# Files") the Click ();. 
                        // method three: Vue realize 
                        the this . $ refs.refFile.dispatchEvent ( new new the MouseEvent ( ' the Click ' )) 
                    }, 
                    FileLoad () { 
                        // Get read file object file the following two ways to achieve the same effect 
                        // method one: get a native html 
                        //document.getElementById selectedFile = const ( 'Files') Files [0];. 
                        // Method two: Vue achieve 
                        const selectedFile =  the this . $ refs.refFile.files [ 0 ]; 

                        var name = selectedFile.name; // check file filenames 
                        var size = selectedFile.size; // size of the selected file, 
                        the console.log ( " file name: "  + name +  " size: "  + size); 

                    } 
                } 
            }) 
        </ Script >
    </body>
</html>

effect:

Click Import

Console display

Note: The hidden type = "file" the input button, you can implement a custom button style, forget that the original ugly style of it!

2. Obtain a local file content

code show as below:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>

    </head>
    <body>
        <div id="app">
            <input type="button" value="导入" id="fileImport" v-on:click="clickLoad" style="background: green; height: 80px; width: 100px; font-size: 28px;">
            <input type="file" id="files" ref="refFile" style="display: none" v-on:change="fileLoad">
        </div>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {

                },
                methods: {
                    clickLoad() {
                        // 下面三种方法实现效果一样
                        //方法一: 原生html
                        // document.getElementById('files').click();
                        // 方法二: jquery实现
                        // $("#files").click();
                        //方法三:Vue实现 
                        this.$refs.refFile.dispatchEvent(new MouseEvent('click'))
                    },
                    fileLoad() {
                        //获取读取的文件File对象 下面两种方法实现效果一样
                        //方法一:原生html获取
                        // const selectedFile = document.getElementById('files').files[0];
                        //方法二:Vue实现
                        const selectedFile = this.$refs.refFile.files[0];

                        var reader = new FileReader();
                        reader.readAsText(selectedFile);
                        reader.onload = function() {
                            console.log(this.result);
                        }
                    }
                }
            })
        </script>
    </body>
</html>

效果：

打开刚刚那个test.txt文件，控制台显示如下：