HTMLのファイル選択ボタンで選択したファイル情報を取得する

こんばんは。きわさです。

以前の HTMLでファイル選択ボタンを設置する に続いて、選択したファイルを扱う方法です。

function test() {
    var file = document.getElementById(id);

    var fileName = file.files[0].name;
    console.log("ファイル名は " + fileName + " です。");

    var fileSize = file.files[0].size;
    console.log("ファイルサイズは " + fileSize + " です。");

    var fileType = file.files[0].type;
    console.log("ファイルタイプは " + fileType + " です。");

    return;
}

選択したファイルの情報は、inputタグのオブジェクトの .files[0] でアクセスできます。
name: ファイル名 “test.jpg” など
size: ファイルサイズ XXXX Byte
type: ファイルタイプ “image/jpeg” など

選択した画像をimgタグで表示したい場合などは FileReader を使います。

function test2() {
    var file = document.getElementById(id);
    var reader = new FileReader();
    reader.onload = function() {
        var img = document.getElementById(imgId);
        img.src = reader.result;
    };
    reader.readAsDataURL(file.files[0]);
    return;
}

FileReaderインスタンスを生成し、readAsDataURLでfiles[0]を読み込み、画像データを表すURLを取得します。
読み込み完了処理でそのURLをimgタグのsrcに設定します。