Html、Vue——本地文件上傳彈框+讀取本地文件內容

1、前言

　　最近在作頁面時，想要實如今網頁上獲取本地文件的信息，在此記錄一下實現方法。部分能夠使用Hmtl原生方法和Jquery方法來實現相同效果，已作註釋，不過主體是Vue實現。css

　　測試環境：谷歌瀏覽器——79.0.3945.88（正式版本）（64 位）html

2、實現方法

1.顯示本地文件上傳彈框

1.1最原生的樣式實現

代碼以下：vue

<!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>

效果：jquery

注：這個只是出現彈框的基本樣式，並不能獲取所選擇的本地文件信息瀏覽器

1.2 Vue實現

代碼以下：app

<!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 name = selectedFile.name; //選中文件的文件名
                        var size = selectedFile.size; //選中文件的大小
 console.log("文件名:" + name + "大小:" + size); } } }) </script>
    </body>
</html>

效果：測試

點擊導入this

控制檯顯示spa

注：經過隱藏 type=「file」的input按鈕，能夠實現自定義按鈕的樣式，忘掉那個原始的醜陋樣式吧！code

2.獲取本地文件內容

代碼以下：

<!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文件，控制檯顯示以下：