一、前言
最近在做頁面時，想要實現在網頁上獲取本地文件的信息，在此記錄一下實現方法。部分可以使用Hmtl原生方法和Jquery方法來實現相同效果，已做注釋，不過主體是Vue實現。
測試環境：谷歌瀏覽器——79.0.3945.88（正式版本） （64 位）
二、實現方法
1.顯示本地文件上傳彈框
1.1最原生的樣式實現
代碼如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <input type="file" id="files"> </div> <script> </script> </body> </html>
效果：
注：這個只是出現彈框的基本樣式，並不能獲取所選擇的本地文件信息
1.2 Vue實現
代碼如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <input type="button" value="導入" id="fileImport" v-on:click="clickLoad" style="background: green; height: 80px; width: 100px; font-size: 28px;"> <input type="file" id="files" ref="refFile" style="display: none" v-on:change="fileLoad"> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script> var app = new Vue({ el: '#app', data: { }, methods: { clickLoad() { // 下面三種方法實現效果一樣 //方法一: 原生html // document.getElementById('files').click(); // 方法二: jquery實現 // $("#files").click(); //方法三:Vue實現 this.$refs.refFile.dispatchEvent(new MouseEvent('click')) }, fileLoad() { //獲取讀取的文件File對象 下面兩種方法實現效果一樣 //方法一:原生html獲取 // const selectedFile = document.getElementById('files').files[0]; //方法二:Vue實現 const selectedFile = this.$refs.refFile.files[0]; var name = selectedFile.name; //選中文件的文件名 var size = selectedFile.size; //選中文件的大小 console.log("文件名:" + name + "大小:" + size); } } }) </script> </body> </html>
效果：
點擊導入
控制台顯示
注：通過隱藏 type=“file” 的input按鈕，可以實現自定義按鈕的樣式，忘掉那個原始的丑陋樣式吧！
2.獲取本地文件內容
代碼如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <input type="button" value="導入" id="fileImport" v-on:click="clickLoad" style="background: green; height: 80px; width: 100px; font-size: 28px;"> <input type="file" id="files" ref="refFile" style="display: none" v-on:change="fileLoad"> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script> var app = new Vue({ el: '#app', data: { }, methods: { clickLoad() { // 下面三種方法實現效果一樣 //方法一: 原生html // document.getElementById('files').click(); // 方法二: jquery實現 // $("#files").click(); //方法三:Vue實現 this.$refs.refFile.dispatchEvent(new MouseEvent('click')) }, fileLoad() { //獲取讀取的文件File對象 下面兩種方法實現效果一樣 //方法一:原生html獲取 // const selectedFile = document.getElementById('files').files[0]; //方法二:Vue實現 const selectedFile = this.$refs.refFile.files[0]; var reader = new FileReader(); reader.readAsText(selectedFile); reader.onload = function() { console.log(this.result); } } } }) </script> </body> </html>
效果：
打開剛剛那個test.txt文件，控制台顯示如下：
