一、获取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. 【开发记录】Linux常用命令记录（一）【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  2. 性能达到原生 MySQL 七倍，华为云 Taurus 技术解读【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  3. Java-手动搭建SSH

    项目搭建工具:eclipse 项目开发环境:①Windows10-64位 ②Tomcat 8.5 ③jdk1.8.0_91 ④MySql 8.0.11 jar包准备:这里不详说,自己准备不不冲突能跑起 ...

  4. RS485与RS232

    以下内容为结合视频,加上自述对其理解. 信息在传输线上通过电压信息进行传输,一个字节的数据有8位. 当传输一个字节的信息时,通信方式有串行通信与并行通信,在这两种通信方式之中,RS485是并行通信,R ...

  5. ajax异步请求的常见方式

    首先先介绍下ajax,ajax(ASynchronous JavaScript And XML)为异步的javascript和xml.所谓的异步和同步是指: 同步:客户端必须等待服务器的响应,在等待期 ...

  6. CSS_实现京东购物车静态页面

    主页面分配: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  7. BZOJ [HNOI2006]鬼谷子的钱袋

    1192: [HNOI2006]鬼谷子的钱袋 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 5367  Solved: 3646[Submit][St ...

  8. UVA-11987

    I hope you know the beautiful Union-Find structure. In this problem, you're to implement somethingsi ...

  9. JavaEE基础(04)：会话跟踪技术，Session和Cookie详解

    本文源码:GitHub·点这里 || GitEE·点这里 一.会话跟踪 1.场景描述 比如登录某个购物网站,身份识别成功后,在网站下单,支付 等操作,这些操作中当前登录用户信息必须是共享的,这样这些操 ...

  10. JS中的深拷贝和浅拷贝

    浅拷贝 浅拷贝是拷贝第一层的拷贝 使用Object.assign解决这个问题. let a = { age: 1 } let b = Object.assign({}, a) a.age = 2 co ...