Javascript、ローカルファイルの読み込み方法

Question

サーバーからローカルファイルを読み取ろうとしています。私はこのトピックをしばらくの間 "グーグル・グーグル"にしてきました。そして、それは不可能だと言う人もいれば、それができるという人もいます。 JavaScriptのアプリでHTMLファイルがディスクに保存されている場合、これはデータを読み込むための簡単な方法で、

はXMLHttpRequestを

を使用してファイルを読むの検索中に、私はこのスクリプトを見つけましたファイル。書き出しは より複雑で、ActiveXオブジェクト（IE） またはXPCOM（Mozilla）のいずれかが必要です。

FNAME - ファイルへの相対パス

コールバック - 関数ファイルのテキストを呼び出す

function readFileHttp(fname, callback) { 

    xmlhttp = getXmlHttp(); 

    xmlhttp.onreadystatechange = function() { 

     if (xmlhttp.readyState==4) { 

      callback(xmlhttp.responseText); 

     } 

    } 

    xmlhttp.open("GET", fname, true); 

    xmlhttp.send(null); 

} 

戻るクロスブラウザXMLHTTP要求オブジェクト

function getXmlHttp() { 

    if (window.XMLHttpRequest) { 

     xmlhttp=new XMLHttpRequest(); 

    } else if (window.ActiveXObject) { 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 

    } 

    if (xmlhttp == null) { 

     alert("Your browser does not support XMLHTTP."); 

    } 

    return xmlhttp; 

} 

しかし、私はどのようにそれを使用し、コールバック関数はどのように見えるべきですか？これらの関数を使ってサンプルコードを提供できますか？

Answer 1

ブラウザからローカルファイルを読み取ることは、セキュリティの大きな違反になります。自分のブラウザでコードを実行することができますドライブ。通常、ajaxリクエストは、ページの元のドメインに限定されます。 （ただし、JSONPのような手法を使ってある程度これを回避することができます）。ほとんどのブラウザでは、ページがローカルファイルシステムのものであっても、ローカルファイルを読むことはできません。

上記の他の方法では、ドメインから（たとえローカルホストであっても）ファイルを直接読み取ることができますが、ファイルシステムから直接読み取ることはできません。

Answer 2

javascriptを使用すると、サーバー上で一般公開されているファイルのみを読み取ることができます。それは私がこれでAJAXリクエストがはるかに簡単であり、すべての主要なブラウザでサポートされている、これを行うにはjQueryライブラリを使用することをお勧め...

お使いのブラウザで開くと似ています。たとえば

http://api.jquery.com/jQuery.get/

$.get('/content/test.html', function(data) { 
    alert(data); 
}); 

Answer 3

コールバックとして渡す関数は、最初のajax呼び出しの結果を実際に処理するコードを構成する必要があります。例えば、最も単純なの：サーバーに保存されているファイルを読む：

alert("RESPONSE: " + xmlhttp.responseText; 

はしかし、我々はあなたが何をしようとして明確にする必要がありますか？その場合、そのターゲットファイルはWebからアクセス可能でなければなりません（そのURLをあなたのajax呼び出しに渡すことができます）。そうしないと、コードが単純に機能しません。

Answer 4

ローカルファイルを読むためのactiveXスクリプトを以下で見つけてください。 （IEで正常に動作します）。

var fso = new ActiveXObject("Scripting.FileSystemObject"); 
    //specify the local path to Open 
    var file = fso.OpenTextFile("C:\\your path\\ filename", 1); 
    var fileContent = file.ReadAll(); 
    file.Close(); 

    //Parse the contents 
    // ex: if the content is in JSON format 
    var obj = eval('(' + fileContent+ ')'); 

    for (var i = 0; i < obj.length; i++) { 
     //Access each element 
     alert(obj[i].name); 
    } 

Answer 5

以下のコードファイルを参照し、テキストエリアにコンテンツをコピーします。

<input type="file" id="fileinput" /> 
    <script type="text/javascript"> 
     function readSingleFile(evt) { 
     //Retrieve the first (and only!) File from the FileList object 
     var f = evt.target.files[0]; 

     if (f) { 
      var r = new FileReader(); 
      r.onload = function(e) { 
       var contents = e.target.result; 
      alert("Got the file.\n" 
        +"name: " + f.name + "\n" 
        +"type: " + f.type + "\n" 
        +"size: " + f.size + " bytes\n" 
        + "starts with: " + contents.substr(1, contents.indexOf("\n")) 
      ); 
      document.getElementById('area').value= contents; 
      } 
      r.readAsText(f); 

     } else { 
      alert("Failed to load file"); 
     } 
     } 

     document.getElementById('fileinput').addEventListener('change', readSingleFile, false); 
    </script> 

    <textarea rows=20 id="area"></textarea>