js讀取本地文件內容

時間 2019-11-25

原文原文鏈接

<!doctype html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>Document</title>html

　　</head>
　　<body>
　　　　<div>
　　　　　　<input type="file" id="files" style="display: none" onchange="fileImport();">
　　　　　　<input type="button" id="fileImport" value="導入">
　　　　　　<div id="resultDiv"></div>
　　　　</div>
　　　　<script src="./jquery-1.12.2.js"></script>
　　　　<script>
　　　　　　//點擊導入按鈕,使files觸發點擊事件,而後完成讀取文件的操做
　　　　　　$("#fileImport").click(function () {
　　　　　　　　$("#files").click();
　　　　　　})
　　　　　　function fileImport() {
　　　　　　　　//獲取讀取我文件的File對象
　　　　　　　　var selectedFile = document.getElementById('files').files[0];
　　　　　　　　var name = selectedFile.name;//讀取選中文件的文件名
　　　　　　　　var size = selectedFile.size;//讀取選中文件的大小
　　　　　　　　console.log("文件名:"+name+"大小:"+size);jquery

　　　　　　　　var reader = new FileReader();//這是核心,讀取操做就是由它完成.
　　　　　　　　reader.readAsText(selectedFile);//讀取文件的內容,也能夠讀取文件的URL
　　　　　　　　reader.onload = function () {
　　　　　　　　　　//當讀取完成後回調這個函數,而後此時文件的內容存儲到了result中,直接操做便可
　　　　　　　　　　console.log(this.result);
　　　　　　　　　　$('#resultDiv').html(this.result);
　　　　　　　　}
　　　　　　}
　　　　</script>
　　</body>
</html>函數