获取input type=file 的文件内容(纯文本)
时间:2019-10-24
本文章向大家介绍获取input type=file 的文件内容(纯文本),主要包括获取input type=file 的文件内容(纯文本)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、获取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>
原文地址:https://www.cnblogs.com/l-y-h/p/11731335.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 设计模式实战-模板模式,代码复用神器
- CSS Flexbox 布局完全指南 (二):3000字,多示例讲解
- 设计模式实战-访问者模式,减少代码体积
- Spring Security 实战干货:UsernamePasswordAuthenticationFilter 源码分析
- 打卡群刷题总结0715——旋转链表
- 设计模式实战-中介模式,为你牵桥搭线
- 设计模式实战-迭代器模式,最常用的设计模式之一
- 设计模式实战-解释器模式,今天给你解疑答惑
- 时间不再浪费评估上!ThingJS 3D可视化开发不用愁
- 设计模式实战-命令模式
- 设计模式实战-责任链模式,超级实用
- 设计模式实战-代理模式,来看看主公如何托孤
- 设计模式实战-门面模式
- 设计模式实战-装饰器模式,教你怎么为代码添砖加瓦
- 设计模式实战-组合模式