JavaScriptのFileReader APIに既存のサーバーファイルを渡す

Question

STLファイルを読み込んで表示する機能の一部です。 ファイル入力を使用してユーザーがアップロードしたファイルを受け取り、FileReader APIを使用してファイルを読み取るopenFileに渡します。

window.addEventListener("load", function() { 

    ... 
    ... 

    // file load 
    var openFile = function (file) { 
     console.log(file); 
     var reader = new FileReader(); 
     reader.addEventListener("load", function (ev) { 
      var buffer = ev.target.result; 
      var geom = loadStl(buffer); 
      scene.remove(obj); 
      obj = new THREE.Mesh(geom, mat); 
      scene.add(obj); 
     }, false); 
     reader.readAsArrayBuffer(file); 
    }; 

    // file input button 
    var input = document.getElementById("file"); 
    input.addEventListener("change", function (ev) { 
     var file = ev.target.files[0]; 
     openFile(file); 
    }, false); 


}, false); 

しかし、私のサーバー上に存在するopenFileにファイルを渡したいとします。

私が使用して試してみました：

var file = new File ("myfile.stl"); 
openFile(file); 

が、それは動作しません。

Answer 1

あなたが望むのは概念的には最初から間違っています。

あなたのユースケースでは、すべてのファイルの読み取り動作がローカルマシン（ブラウザ）で行われました。表示されているように、リモートのエンドポイント情報に対処する前に、FileReader apiがローカルファイルをロードしてバッファ内に表示します（ローカルメモリ）。

そして、あなたのローカルJavaScriptコードネットワーク設定なしで！

リモートファイルをロードしてから、ローカルでFileReader apiを使用するか、サーバープログラムでファイル操作を実行してから、結果をブラウザに返します。

File APIをご覧ください。

one use case of File APIがあなたのニーズに似ているようですが、実際は別のシナリオです。

Answer 2

はここソリューションです：

window.addEventListener("load", function() { 

     ... 
     ... 

     var openFile = function(file) { 
      var xhr = new XMLHttpRequest(); 
      xhr.open('GET', file, true); 
      xhr.responseType = 'arraybuffer'; 

      xhr.onload = function(e) { 
       var buffer = this.response; 
       var geom = loadStl(buffer); 
       scene.remove(obj); 
       obj = new THREE.Mesh(geom, mat); 
       scene.add(obj); 
      }; 

      xhr.send(); 
     }; 

     openFile('filename'); 

    }, false);