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