一、获取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. 一统江湖的大前端（8）- velocity.js 运动的姿势(上)

    [摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...

  2. 【华为云网络技术分享】HTTP重定向HTTPS配置指南

    [摘要] 本文介绍使用华为云弹性负载均衡配置Http重定向到Https的方法. 1. HTTP.HTTPS 头部标识 ELB 对 HTTPS 进行代理,无论是 HTTP 还是 HTTPS 请求,到了  ...

  3. Python高级学习笔记

    Python高级学习笔记,此笔记中包含Linux操作系统.Html+CSS+JS.网络协议等. 所有思维导图为本人亲手所画,请勿用于商用. 大哥们,求点赞哦. 第一天笔记:链接 第二天笔记:链接 第三 ...

  4. Unity3D for iOS初级教程：Part 1/3(下)

    转自:http://www.cnblogs.com/alongu3d/archive/2013/06/01/3111735.html 一个手指来统治他们 但是等等,你还没有完全完成! 如果你玩游戏有一 ...

  5. ios开发入门- WebView使用

    转自:http://mahaile.blog.51cto.com/2891586/1021515/ 目标 : webview使用 在一些移动app中,有时程序会载入 外表的html 界面, andro ...

  6. Xcode10：The operation couldn’t be completed. (DVTCoreSimulatorAdditionsErrorDomain error 0.)

    目录 Xcode10 build success,但是模拟器Simulator不能正常启动,报错如下: 解决方案: Xcode10 build success,但是模拟器Simulator不能正常启动 ...

  7. 深入学习 Arduino LinkedList库（一个变长的集合类数组）

    QQ技术互动交流群:ESP8266&32 物联网开发 群号622368884,不喜勿喷 单片机菜鸟博哥CSDN 1.前言 博主是做Android App开发出身的,所以对Java这门语言算是有 ...

  8. SpringAOP在web应用中的使用

    之前的aop是通过手动创建代理类来进行通知的,但是在日常开发中,我们并不愿意在代码中硬编码这些代理类,我们更愿意使用DI和IOC来管理aop代理类.Spring为我们提供了以下方式来使用aop框架 一 ...

  9. ES7中的async 和 await

    async 和 await 一个函数如果加上 async ,那么该函数就会返回一个 Promise async function test() { return "1" } con ...

  10. 在C#中进行时间和时间戳的转换

    一.时间转换为 毫秒时间戳 由于 UTC 和 中国时区有时间差, 所以我们在时间转换为时间戳的时候, 我们需要多减去8个小时的时区差. // 时间转换为 毫秒时间戳 public static dou ...