獲取input type=file 的文件內容（純文本）

時間 2019-11-07

標籤獲取 input type file 文件內容文本简体版

原文原文鏈接

1、獲取input type=file 的文件內容（純文本）

一、需求一

　　經過點擊其餘事件，來觸發文件選擇框（限定格式爲 .c 文件），而不是手動鼠標點擊觸發。javascript

【思路：】
    step1：將 input 框隱藏，當點擊其餘事件後，經過其餘事件來觸發 input 事件。
    step2：能夠經過 js 獲取到標籤，而後觸發 click 事件。
    
【代碼：】
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>獲取input type=file 的文件內容</title>
    </head>
    <body>
        <div id="app">
            <a @click="chooseFile">{{fileName}}</a>
                   <!-- 使用 accept 屬性能夠限定 文件選擇的格式 -->
            <input type="file" id="file" style="display: none;" accept=".c">
        </div>
        
        
        
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: "#app",
                data () {
                    return {
                        fileName: '選擇文件'
                    }
                },
                methods: {
                    chooseFile() {
                        // 彈出文件選擇框
                        let input = document.getElementById('file')
                        input.click()
                    }
                }
            });
        </script>
    </body>
</html>

以下圖，點擊選擇文件，會彈出一個文件選擇框，並默認格式爲 .c 文件。html

二、需求二

　　獲取選擇文件（純文本）的信息以及文本內容。vue

【思路：】
    step1：監控 input 的 onchange 事件。
    step2：當文件選中後，觸發 onchange 相關操做。
注意：
    FileReader.readAsText()讀取文本的操做是異步操做，且若不是純文本，會出現亂碼。
    對於異步操做，能夠使用回調函數來獲取最終獲得的值。
    
【代碼：】
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>獲取input type=file 的文件內容</title>
    </head>
    <body>
        <div id="app">
            <a @click="chooseFile">選擇文件</a>
            <!-- 使用 accept 屬性能夠限定 文件選擇的格式 -->
            <input type="file" id="file" style="display: none;" accept=".c" @change="fileInfo(getFileContent)">
            <p>{{fileName}}</p>
            <p>{{fileContent}}</p>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: "#app",
                data () {
                    return {
                        file: {},
                        fileName: '',
                        fileContent: ''
                    }
                },
                methods: {
                    chooseFile() {
                        // 彈出文件選擇框
                        let input = document.getElementById('file')
                        input.click()
                    },
                    fileInfo (callback) {
                        // 獲取input標籤選擇的文件,並選擇第一條
                        let resultFile = document.getElementById('file').files[0]
                        // 若是文件存在
                        if (resultFile) {
                            // 獲取文件信息
                            this.file = resultFile
                            // 獲取文件名
                            this.fileName = resultFile.name
                            
                            // 使用 FileReader 來讀取文件
                            let reader = new FileReader()
                            
                            // 讀取純文本文件,且編碼格式爲 utf-8
                            reader.readAsText(resultFile, 'UTF-8')
                            
                            // 讀取文件,會觸發 onload 異步事件,可以使用回調函數 來獲取最終的值.
                            reader.onload = function (e) {
                                let fileContent = e.target.result
                                
                                // 若爲回調函數,則觸發回調事件
                                if (callback && (typeof callback === 'function')) {
                                    callback(fileContent)
                                }
                            }
                        }
                    },
                    getFileContent (fileContent) {
                        this.fileContent = fileContent
                    }
                }
            });
        </script>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。