JavaScriptで選択されたファイルを表示する

アップデートの際に表示が崩れてしまいました。
現段階で未修正です。
申し訳ございませんがご了承ください。

手順

以下の二つのファイル

  • test.html
  • test.js

を作成する

test.html













test.js

var openImageFileDialog = function() {
  var inputElement = document.getElementById('input_image');
  inputElement.click();
}

var openMusicFileDialog = function() {
  var inputElement = document.getElementById('input_music');
  inputElement.click();
}

var imageFileSelected = function() {
  var fileNameSpanElement = document.getElementById('image_file');
  fileNameSpanElement.textContent = '';
  var inputElement = document.getElementById('input_image');
  var fileList = inputElement.files;
  var file = fileList[0];
  fileNameSpanElement.textContent = file.name;
  
  var imageElement = document.createElement('img');
  imageElement.addEventListener('load', function(){
    window.URL.revokeObjectURL(this.src);
  }, false);
  imageElement.src = window.URL.createObjectURL(file);
  fileNameSpanElement.appendChild(imageElement);
}

var musicFileSelected = function() {
  var fileNameSpanElement = document.getElementById('music_file');
  fileNameSpanElement.textContent = '';
  var inputElement = document.getElementById('input_music');
  var fileList = inputElement.files;
  var file = fileList[0];
  fileNameSpanElement.textContent = file.name;
  
  
  var audioElement = document.createElement('audio');
  audioElement.controls = true;
  audioElement.addEventListener('canplaythrough', function(){
    window.URL.revokeObjectURL(this.src);
  }, false);
  audioElement.src = window.URL.createObjectURL(file);
  fileNameSpanElement.appendChild(audioElement);
}

説明

test.js

23,41行目

window.URL.createObjectURL(file);

createObjectURL で一時的なファイルのURLを作成してsrc に参照させる
src に代入されると同時にロードが開始するのでロード完了時のイベント登録は先に行っておく

21,39行目

window.URL.revokeObjectURL(this.src);

ロードが完了したらURLのオブジェクトは不要なので revokeObjectURL でロード完了時にURLのオブジェクトは破棄する

参考

window.URL.createObjectURL
例: オブジェクト URL で画像を表示
<img>: 埋め込み画像要素

シェアする

  • このエントリーをはてなブックマークに追加

フォローする