获取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>
获取input type=file 的文件内容（纯文本）的更多相关文章
- 获取 input type="file" 标签的内容,并使用ajax进行请求到服务器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 获取 input type=file 上次文件的路径
可以通过 $('这个元素').val();得到全路径:
- js 获取input type="file" 选择的文件大小、文件名称、上次修改时间、类型等信息
文件名的传递 ---全路径获取 $('#file').change(function(){ $('#em').text($('#file').val()); }); 文件名的传递 ---只获取文件名 ...
- jquery的input:type=file实现文件上传
<!DOCTYPE html> <html> <head> <title>html5_2.html</title> <style> ...
- input type="file"指定文件类型为excel
指定上传类型为excel:加上accept="application/vnd.ms-excel"即可,只兼容chrome跟ff,不兼容ie <input type=" ...
- 如何获取input，file里的文件，实现预览效果，并传给后端？
单纯的事件与获取 <input type="file" name="file" id="fileUpload"> <img ...
- input[type="file"]的样式以及文件名的显示
如何美化input[type="file"] 基本思路是: (1)首先在 input 外层套一个 div : (2)将 div 和 input 设置为一样大小(width和heig ...
- input[type='file']获取上传文件路径案例
最近在项目时,需要获取用户的上传文件的路径,便写了一个demo: <body> <input type="file" name="" valu ...
- jquery判断 input type="file"上传文件是否为空
要想获取type="file"的input内容,用var file = $("id").val();肯定是不行的,下面是代码: html上传按钮为: <i ...
随机推荐
- 转:org.apache.maven.archiver.MavenArchiver.getManifest错误
eclipse导入新的maven项目时,pom.xml第一行报错: org.apache.maven.archiver.MavenArchiver.getManifest(org.apache.mav ...
- 单片机内存分配中的.text .data .bss heap stack
[本文转自:http://www.51hei.com/bbs/dpj-41696-1.html] .text段:代码段(code segment/text segment)通常是指用来存放程序执行代码 ...
- luogu P1168 中位数 |树状数组+二分
题目描述 给出一个长度为NN的非负整数序列A_i,对于所有1 ≤ k ≤ (N + 1) / 21≤k≤(N+1)/2,输出A_1, A_3, -, A_2k - 1的中位数.即前1,3,5,-个数的 ...
- iOS-使用Xcode自带单元测试UnitTest
![Uploading QQ20160129-3_262826.png . . .]####什么是单元测试?一听到单元测试这个词感觉很高端,其实单元测试就是为你的方法多专门写一个测试函数.以保证你的方 ...
- [TimLinux] Django 信号
1. 信号定义 django包含有一个“信号分发器”,在框架内任何时候,在任何地方,有动作发生时,用来帮助解耦应用之间获取通知.简言之,信号允许特定的发送者通知一系列接收者某一特定动作已经发生了.特别 ...
- 2017 ACM/ICPC 沈阳 L题 Tree
Consider a un-rooted tree T which is not the biological significance of tree or plant, but a tree as ...
- ARTS-S linux常用命令
压缩 把文件夹test压缩成test.tar.gz tar -czvf test.tar.gz test centos同步网上时间 cp /usr/share/zoneinfo/Asia/Shangh ...
- 【CSS】343- CSS Grid 网格布局入门
CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格.Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列. 它还能使我们在不改变任何HTML的情况下,使用 ...
- synchronized和volatile区别
不同一: synchronized可以修饰方法, volatile只能修饰变量 不同二: synchronized是同步的 volatile修饰的变量具有可见性.
- webpack学习2.2webpack简介,初步了解
webpack V1功能进化 编译打包 HMR(模块热更新) 代码分割 文件处理(loader) webpack V2功能进化 tree shaking(并欸有在项目中使用的代码不会打包到里面,打包之 ...