アップデートの際に表示が崩れてしまいました。
現段階で未修正です。
申し訳ございませんがご了承ください。
手順
以下の二つのファイル
- 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>: 埋め込み画像要素