

javascriptは初心者なのですが、  
サンプルコードなどを組み合わせながらwebアプリを作っています。  
その中でのファイル読み込みについての質問です。

htmlで

[code]

    <input type="file" class="input_02_file" multiple/>
    
[/code]

と書き、.js内で

[code]

    var B = doc.querySelector(".input_02_file").files
    
[/code]

とするとblob型のファイルリストがBに入ります。

しかし、毎回ファイル指定する必要があり面倒です。  
なので、スクリプトと同じディレクトリにファイルを置き、読み込めたらと考えました。  
希望はBが自動で読み込まれることなのですが、できるでしょうか。

いろいろ調べてみましたが、分からず質問させていただきました。  
ヒントでも頂ければ幸いです。宜しくお願い致します。

### 追記

コメントありがとうございます。アプリは、画像を `readAsDataURL()` でいくつか読み込み、それをスライダーで切り替えるイメージです。  
初期状態で画像のサンプルを読み込みたいです。  
blob型かFileインスタンスを絶対パス(`".images/sample.png"`)から作成できれば、上の関数で画像を読めるのですが。

<https://stackoverflow.com/questions/25046301/convert-url-to-file-or-blob-for-
filereader-readasdataurl>  
この辺りが参考になるかと思い、読んでいます。


CC BY-SA 3.0
2016-08-26T13:12:14.523
28514
2017-08-02T09:45:22.993
2017-08-02T09:45:22.993
19110
18610
question
javascript
ファイルをblobの形で読み込みたい


サーバー側に用意しておいたサンプルデータをBlobとして読み込みたい、ということですね。

XMLHttpRequest では `xhr.responseType` に `blob` を指定することで、Blobとしてレスポンスを取り出せるようです。

エラー処理などを省いた最低限のコードとしてはこんな感じでしょうか。

[code]

    var req = new XMLHttpRequest();
    req.open("GET", "https://i.imgur.com/rjI42fW.png", true);
    req.responseType = "blob";
    
    req.onload = function(e) {
      // e.target or req
      var blob = e.target.response;
      document.write('<img src="' + window.URL.createObjectURL(blob) + '">');
    };
    
    req.send();
[/code]

今回は大丈夫だと思いますが、XHRなのでCORSの制約を受けます。対象のリソースが別オリジンにある場合は、適切なヘッダを出力してください。

### 参考

  * [Sending and Receiving Binary Data - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data)
  * [javascript - Getting BLOB data from XHR request - Stack Overflow](https://stackoverflow.com/questions/8022425/getting-blob-data-from-xhr-request)  
arraybufferを経由した方法も載っていますが、最近のブラウザならblobでいけるようです。


CC BY-SA 3.0
2016-08-26T15:06:05.997
28517
2017-08-02T06:01:14.893
2017-08-02T06:01:14.893
8000
8000
28514
answer