一、获取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. 编译原理 算法3.8 LR分析 c++11实现

    LR分析简介 LR分析是应用最广泛的一类分析方法,它是实用的编译器功能中最强的分析器,其特点是: 1,采用最一般的无回溯移进-规约方法. 2,可分析的文法是LL文法的真超集. 3,能够及时发现错误,及 ...

  2. java抽象类,接口(接口定义,实现接口,instanceof运算符,对象转换)

    抽象类 在面向对象的概念中,所有的对象都是通过类来表述的,但并不是所有的类都能够完整的描绘对象,如果一个类中没有包含足够的信息来描绘一类具体的对象,这样的类就是抽象类.抽象类往往用来表征对问题领域进行 ...

  3. unity3d 动态添加地面贴图 草地

    TerrainData.splatPrototypes = ]{ new SplatPrototype() { texture=Caodi, //Texture2D的贴图 normalMap=null ...

  4. Dubbo加权轮询负载均衡的源码和Bug，了解一下？

    本文是对于Dubbo负载均衡策略之一的加权随机算法的详细分析.从2.6.4版本聊起,该版本在某些情况下存在着比较严重的性能问题.由问题入手,层层深入,了解该算法在Dubbo中的演变过程,读懂它的前世今 ...

  5. DWVA-关于SQL注入的漏洞详解

    low等级 代码如下: <?php if( isset( $_REQUEST[ 'Submit' ] ) ) { // Get input $id = $_REQUEST[ 'id' ]; // ...

  6. 3步轻松搞定Spring Boot缓存

    作者:谭朝红 前言 本次内容主要介绍基于Ehcache 3.0来快速实现Spring Boot应用程序的数据缓存功能.在Spring Boot应用程序中,我们可以通过Spring Caching来快速 ...

  7. node-sass下载失败

    在angular项目中下载依赖npm install时提示node-sass安装失败,解决方法如下: 1.下载win32-x64-57_binding.node文件至指定目录 2.添加环境变量: 变量 ...

  8. android studio 代码问题总结

    1,android studio隐藏title时,用eclipse里面的方法不行,所以用下面的代码解决,此代码需要写在 加载xml文件之后 getSupportActionBar().hide(); ...

  9. 一个UI程序开始的代码函数导读

    #import "QFAppDelegate.h" @implementation QFAppDelegate //最后一个执行的初始化函数 //主要做一些启动之前的初始化操作 - ...

  10. vue之新手使用

    vue中文网站:https://cn.vuejs.org/v2/guide/installation.html  包含了安装.使用.api.视频. 一. 什么是 Vue Vue 是一个前端框架,特点是 ...