buttonでファイルを開く - pirosikick's diary

小ネタ。 <input type="file"/>はスタイルが扱いづらい。<button>クリック時に動的に生成してしまえばいいんじゃないか（というかdepth.meがそういう実装だった）

<!DOCTYPE html>
<body>
<button>Open File</button>

<script>
  var button = document.querySelector('button');

  // ボタンクリック
  button.addEventListener('click', function onClickOpenFileButton () {

    // 前に突っ込んだ<input type="file" />の削除
    // 変数もつのだるいのでListenerに突っ込んでみる
    if (onClickOpenFileButton.inputElement) {

      // 削除
      document.body.removeChild(onClickOpenFileButton.inputElement);
    }

    var inputElement = onClickOpenFileButton.inputElement = document.createElement('input');

    inputElement.type = 'file';

    // 非表示
    inputElement.style.visibility = 'hidden';
    inputElement.style.position = 'absolute';
    inputElement.style.left = '-9999px';

    document.body.appendChild(inputElement);

    inputElement.addEventListener('change', function (e) {

      // 選択されたファイル郡
      console.log(e.target.files);

    }, false);

    // このタイミングでファイル選択ダイアログが開く
    inputElement.click();

  }, false);

</script>
</body>

これなら二度同じファイルを選択してもchangeイベントが発生するし、いいんじゃなかろうか。