0

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

htmlで

<input type="file" class="input_02_file" multiple/>

と書き、.js内で

var B = doc.querySelector(".input_02_file").files

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

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

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

追記

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

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

2
  • 1
    <input type="file"> で選択するようなクライアント側のファイルを読み込みたいなら、それをサーバー上のスクリプトと同じディレクトリに置くというのは無理な話では?どんなWebアプリを作ろうとしているのか書いていただけると、想像しやすいのですが・・・。
    – unarist
    Commented 2016年8月26日 14:00
  • コメントありがとうございます。アプリは、画像をreadAsDataURL()でいくつか読み込み、それをスライダーで切り替えるイメージです。初期状態で画像のサンプルを読み込みたいです。blob型かFileインスタンスを絶対パス(".images/sample.png")から作成できれば、上の関数で画像を読めるのですが。。 stackoverflow.com/questions/25046301/… この辺りを読んでおります。
    – saku0aab
    Commented 2016年8月26日 14:17

1 件の回答 1

1

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

XMLHttpRequest では xhr.responseTypeblob を指定することで、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('<img src="' + window.URL.createObjectURL(blob) + '">');
};

req.send();

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

参考

2
  • e.responseでは取得できずでした。req.responseで取得できました
    – eiel
    Commented 2017年8月2日 5:51
  • サンプル故の端折ったコードとは思いますが、他の方が誤解する可能性があるので念の為、指摘しておきます。 document.write を使用していますが、DOMContentLoaded 後に実行されると画面がクリアされる問題があります。 コードの原形を保つなら、insertAdjacentHTMLinnerHTML を使う事で解決できると思います。
    – think49
    Commented 2017年8月2日 9:51

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。