累成一条狗

获取input type=file 的文件内容（纯文本）

一、获取input type=file 的文件内容（纯文本）

1、需求一

　　通过点击其他事件，来触发 文件选择框（限定格式为 .c 文件），而不是手动鼠标点击触发。

【思路：】
    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 文件。

 

 


2、需求二

　　获取选择文件（纯文本）的信息以及文本内容。

【思路：】
    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>

 

 

 

 

posted on 2019-10-24 11:51  累成一条狗  阅读(15362)  评论(0)  编辑  收藏  举报

导航