2013年5月20日 星期一

無法使用AJAX讀取本機檔案

在自己電腦的瀏覽器無法使用AJAX讀取本機檔案的經驗嗎?
在以下的程式碼中，使用jQuery的get API存取CSV檔案會發生如下圖的錯誤訊息。
<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>jQuery access csv file</title>     
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript"> 
    $(function () {
      alert("0519");    
      $.get('test.csv',function(data) {
        alert(data);
      });
    });
    </script>
  </head>
  <body>   
  </body>
</html>

錯誤訊息畫面

解決方法如下
Google Chrome瀏覽器
加入以下命令即可解決這樣的問題
"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
加入--allow-file-access-from-files 指令後，重新開啟瀏覽器，在一次執行上述程式，即可見到成功的畫面。

參考資料： 連結

Mozilla FireFox瀏覽器
在$.get()函數中添加'text'，即可讀取本機檔案，如下程式碼中第12行
<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>jQuery access csv file</title>     
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript"> 
    $(function () {
      alert("0519");    
      $.get('test.csv',function(data) {
        alert(data);
      },'text');
    });
    </script>
  </head>
  <body>   
  </body>
</html>
讀取本機的CSV檔的畫面

於

沒有留言:

張貼留言