如何利用JavaScript‧讀取本機檔案再顯示出來

01. 歷史是這樣的，之前程式碼一直是用PHP寫的，再用Phonegap做成apk，再放入一部大陸Android裝置上使用，程式碼、圖片、影片也是直接放入Android裝置內，以便沒有WIFI/數據連線時也能使用。問題是，Android裝置需安裝Apache及PHP伺服器，而且就算是8核CPU，程式碼、圖片載入時間長而且經常『彈apps』。一直想轉用JavaScript，但礙於觀念，JavaScript是不容許載入檔案內容的，所以一直沒有測試。直到今日，終於忍受不了『彈apps』，決定研究一下。

02. 要讀取的檔案內容很簡單，數據第一欄是檔案名稱，第二欄是大圖片的解像度，第三欄是小圖片的解像度。

03. 第一個想到的方法，直接用JQuery的.get方法讀取檔案，再把檔案內容寫入DIV ID中。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var data = $.get("filelist.txt", function(data) {
$('div#content').append(data);
});
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>

04. 執行後出來結果，是不是很簡單呢！

05. 但問題來了，用伺服器localhost方式讀取是沒有問題的。但改用file:///方法時，就不能成功讀取檔案。

06. 翻查JQuery的.get方法文件，原來是需要用上伺服器，才能讀取檔案。

07. 改用另一個方法，建立一個iframe以載入檔案內容，再用JavaScript的getElementById方法讀取iframe內容。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var data = document.getElementById("file_content").contentDocument.getElementsByTagName('body')[0].innerHTML;
$('div#content').append(data);
});
</script>
</head>
<body>
<iframe id="file_content" style="width: 200px; height: 200px;" src="filelist.txt"></iframe>
<div id="content"></div>
</body>
</html>

08. 這次有點特別，第一天試除了iframe那個框框可以出來，其他的內容全不出來(IE 11卻沒有問題)。第二天卻只有iframe可顯示檔案內容，<div id=”content”></div>內卻看不到var data的內容。

09. 再改用另一個方法取得iframe內容。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var data = $('#file_content').contents().find("body").html();
$('div#content').append(data);
});
</script>
</head>
<body>
<iframe id="file_content" style="width: 200px; height: 200px;" src="filelist.txt"></iframe>
<div id="content"></div>
</body>
</html>

10. 相同的結果，只有IE 11可以顯示真正的結果。所以，最終是否可以成功讀取檔案，要訣在於你究竟用那一款的瀏覽器。

IT Knowledge Base

如何利用JavaScript‧讀取本機檔案再顯示出來

發佈留言