頁面預覽上傳檔案的內容
阿新 • • 發佈：2018-12-23
功能介紹：
網站通常通過file型別的標籤進行檔案的上傳，檔案為客戶端任意位置（桌面、C盤、D盤……）的檔案。有時，需求需要在檔案上傳到伺服器之前，在頁面的某區域顯示檔案的內容。這在過去的技術中，是很難實現的，但是通過H5的API介面，卻可以通過很少的程式碼實現此功能。
程式碼：
註釋：本示例只能上傳一個檔案，若需要上傳多個檔案，請自行修改一下。<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>頁面預覽顯示上傳的檔案內容</title> </head> <body> <div class="div1"> <input type="file" name="" id="file" class="file" onchange="textMess(this.files)"> <hr> 選中檔案內容展示區: <div id="div2"></div> </div> <style> #div2{ border:1px solid black; overflow:auto; height:300px; } </style> <script> function textMess(file){ var mess=file[0]; var file=new FileReader(); file.readAsText(mess); file.onload=function(e){ var htmlCode=e.target.result; document.getElementById("div2").innerText=htmlCode; } } </script> </body> </html>
頁面展示：
