一、获取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>

获取input type=file 的文件内容（纯文本）的更多相关文章

  1. 获取 input type="file" 标签的内容,并使用ajax进行请求到服务器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 获取 input type=file 上次文件的路径

    可以通过 $('这个元素').val();得到全路径:

  3. js 获取input type="file" 选择的文件大小、文件名称、上次修改时间、类型等信息

    文件名的传递 ---全路径获取 $('#file').change(function(){ $('#em').text($('#file').val()); }); 文件名的传递 ---只获取文件名 ...

  4. jquery的input:type=file实现文件上传

    <!DOCTYPE html> <html> <head> <title>html5_2.html</title> <style> ...

  5. input type="file"指定文件类型为excel

    指定上传类型为excel:加上accept="application/vnd.ms-excel"即可,只兼容chrome跟ff,不兼容ie <input type=" ...

  6. 如何获取input，file里的文件，实现预览效果，并传给后端？

    单纯的事件与获取 <input type="file" name="file" id="fileUpload"> <img ...

  7. input[type="file"]的样式以及文件名的显示

    如何美化input[type="file"] 基本思路是: (1)首先在 input 外层套一个 div : (2)将 div 和 input 设置为一样大小(width和heig ...

  8. input[type='file']获取上传文件路径案例

    最近在项目时,需要获取用户的上传文件的路径,便写了一个demo: <body> <input type="file" name="" valu ...

  9. jquery判断 input type="file"上传文件是否为空

    要想获取type="file"的input内容,用var file = $("id").val();肯定是不行的,下面是代码: html上传按钮为: <i ...

随机推荐

  1. 华为参与《基于5G技术的医院网络建设标准》的制定

    [摘要] 5G 千兆网承载五地远程会诊,现场完成三例复杂性疑难重症远程病例讨论 [中国,北京,2019年9月4日] 金秋之际,在国家卫生健康委指导下,由中日友好医院•国家远程医疗与互联网医学中心•国家 ...

  2. SpringBoot-多环境切换相关(六)

    多环境切换 profile是Spring对不同环境提供不同配置功能的支持,可以通过激活不同的环境版本,实现快速切换环境: 方式一:多配置文件 我们在主配置文件编写的时候,文件名可以是 applicat ...

  3. luogu P4065 [JXOI2017]颜色 |随机化+前缀和

    题目描述 可怜有一个长度为 n 的正整数序列 Ai,其中相同的正整数代表着相同的颜色. 现在可怜觉得这个序列太长了,于是她决定选择一些颜色把这些颜色的所有位置都删去. 删除颜色 i 可以定义为把所有满 ...

  4. SI522和RC522/ZS3801/FM17520的区别

    小编最近在测试一颗新的芯片,是国内知名厂家中科微研发的,主打超低功耗的厂家. 经过测试和比较小编发现 相对于MFRC522,SI522可以完全替换,不需要做任何更改,同时接受模式下功耗低10mA左右, ...

  5. 学习go语言第二天-变量、常量

    编写测试程序 源码文件以_test结尾;例如:xxx_test.go 测试方法名以Test开头;例如:func TestXXXXX(t *testing.T){} 实现斐波那且数列 package f ...

  6. CodeForces999A-Mishka and Contest

    A. Mishka and Contest time limit per test 1 second memory limit per test 256 megabytes input standar ...

  7. FPGA_VIP_V101 视频开发板 深入调试小结

    FPGA_VIP_V101 推出已经有半年有余,各项功能例程已移植完毕,主要参考crazybingo例程进行移植和结合开发板设计了几个实例例程 主要包含: 硬件配置: FPGA:EP4CE6E22C8 ...

  8. 人生苦短，我用Python（1）

    1.Python保留字与标识符 保留字是Python语言中一些已经被赋予特定意义的单词,开发程序时,不可以把这些保留字作为变量.函数.类.模块和其他对象的名称来使用. and as assert br ...

  9. 关于页面打印window.print()的样式问题

    当我们打印网页的时候.有时候会发现.打印出来的.跟网页上看到的样式的差别有点大.这其中可能有的问题是.样式问题. 当调用打印(window.print())方法时.打印机会在网页的样式中查找 @med ...

  10. ubuntu远程桌面软件vnc。

    http://www.linuxidc.com/Linux/2017-03/141936.htm 现在Linux是非常火的  很多人喜欢用它,界面简单,操作容易,有很多图形化工具如WinSCP可以与U ...