JavaScript ユーザに画像を選択させる

ユーザにローカルの画像を選択させてWebページ上に反映させたかったので調べた。

画像を選択させるための導線

<input type="file" id="myImage" accept="image/*">
<img id="preview">

• input タグを使う。
• type は file を指定する。
• accept というattributeがあるから、それに image/* を設定する。

ユーザが選択した画像を画面に反映する

$('#myImage').on('change', function (e) {
  var reader = new FileReader();
  reader.onload = function (e) {
    $("#preview").attr('src', e.target.result);  
  }
  reader.readAsDataURL(e.target.files[0]); 
});

• input に対して、ユーザが何かしら選択したことを検知するリスナーを付与。
• FileReader で読み込んで、読み込んだ画像をsourceとして image タグに付与。
• なお、上のサンプルはjQueryで書いてる。

参考

• 【JavaScript】inputtype=”file”で選択した画像をimg要素で表示する

JavaScript HTTP通信で情報取得する

1. XMLHttpRequest オブジェクトを作る
2. 取得URLやメソッドを設定する
3. 取得した時の制御をコールバックとして実装する
4. 通信開始メソッドをコールする

上記を踏まえたサンプルは以下。

// 1. XMLHttpRequestの生成
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    // 3. 取得した時の制御
    if (xhr.readyState == 4) {
        // 取得成功
    }
};
// 2. 取得URL・メソッドの設定
xhr.open("GET", "http://www.example.org/example.txt");
// 4. 通信開始メソッドをコール
xhr.send();

参考

• XMLHttpRequest の使用