一、获取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>
