一、获取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. 【Python成长之路】python 基础篇 -- global/nonlocal关键字使用

    1 课程起源 有一次在工作中编写python工具时,遇到一个 问题:从配置文件读取变量A后,无法在内存中把A的值改变成新的内容.为了解决"更新内存中变量"的这个问题,查找了一些帖子 ...

  2. 产品vs程序员：你知道www是怎么来的吗？

    精彩回顾: 我是一个explorer的线程 我是一个杀毒软件线程 我是一个IE浏览器线程 比特宇宙-TCP/IP的诞生 Unix.Linux.Windows三大帝国集团发表<关于比特宇宙推进经贸 ...

  3. Java 将Excel转为PDF

    本文将介绍在Java程序中如何将Excel工作簿转为PDF文档的,包括: 将整个工作簿转为PDF 将指定工作表转为PDF   使用工具:Free Spire.XLS for Java (免费版) Ja ...

  4. iOS全局处理键盘事件

    转自:http://www.cnblogs.com/xinus/archive/2013/01/22/ios-keybord-notification.html 注册监听键盘事件的通知 [[NSNot ...

  5. Ganglia与Centreon整合构建智能化监控报警平台

    一.智能运维监控报警平台的组成 随着大数据时代的来临,运维工作的难度越来越大,每个运维人员都要面临不计其数的服务器和海量的数据,如何保证众多服务器和业务系统稳定高效地运行并尽量减少死机时间,成为考核运 ...

  6. Python网络爬虫入门实战（爬取最近7天的天气以及最高/最低气温）

    _ 前言 本文文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: Bo_wen   最近两天学习了一下python,并自己写了一个 ...

  7. 【搞定Jvm面试】 JVM 垃圾回收揭秘附常见面试题解析

    JVM 垃圾回收 写在前面 本节常见面试题 问题答案在文中都有提到 如何判断对象是否死亡(两种方法). 简单的介绍一下强引用.软引用.弱引用.虚引用(虚引用与软引用和弱引用的区别.使用软引用能带来的好 ...

  8. 【Feign】自定义配置

    [Feign]自定义配置 转载: 自定义配置,如果在同一个工程,注意配置不要和@SpringBootApplication或@ComponentSacan放在用一个包下,就是不要被扫描上 packag ...

  9. 【CentOS7】常用命令

    [CentOS7]常用命令 转载:https://www.cnblogs.com/yangchongxing/p/10646640.html 目录 ========================== ...

  10. where和having区别

    壹: where后面不能跟聚合函数(sum.avg.count.max.min) having后面可以跟 贰: where和having都能用: select goods_price,goods_na ...