質問: doc.querySelector(".input_02_file").files ``` とするとblob型のファイルリストがBに入ります。 しかし、毎回ファイル指定する必要があり面倒です。 なので、スクリプトと同じディレクトリにファイルを置き、読み込めたらと考えました。 希望はBが自動で読み込まれることなのですが、できるでしょうか。 いろいろ調べてみましたが、分からず質問させていただきました。 ヒントでも頂ければ幸いです。宜しくお願い致します。 ### 追記 コメントありがとうございます。アプリは、画像を `readAsDataURL()` でいくつか読み込み、それをスライダーで切り替えるイメージです。 初期状態で画像のサンプルを読み込みたいです。 blob型かFileインスタンスを絶対パス(`".images/sample.png"`)から作成できれば、上の関数で画像を読めるのですが。 この辺りが参考になるかと思い、読んでいます。
回答: サーバー側に用意しておいたサンプルデータをBlobとして読み込みたい、ということですね。 XMLHttpRequest では `xhr.responseType` に `blob` を指定することで、Blobとしてレスポンスを取り出せるようです。 エラー処理などを省いた最低限のコードとしてはこんな感じでしょうか。 ``` 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(''); }; req.send(); ``` 今回は大丈夫だと思いますが、XHRなのでCORSの制約を受けます。対象のリソースが別オリジンにある場合は、適切なヘッダを出力してください。 ### 参考 * Sending and Receiving Binary Data - Web APIs | MDN * javascript - Getting BLOB data from XHR request - Stack Overflow arraybufferを経由した方法も載っていますが、最近のブラウザならblobでいけるようです。