JavaScript 画像や映像ファイルを読み込む
画像ファイルや映像ファイルを読み込むには、「FileReader」オブジェクトの「readAsDataURL()」メソッドを使います。readAsDataURL()のパラメータに、選択されたファイルオブジェクトを指定します。画像ファイルや映像ファイルの読込が完了するとloadイベントが発生するので、FileReaderオブジェクトのonloadにイベントハンドラを設定し、読み込み完了時の処理を行います。イベントハンドラにはイベントオブジェクトが渡され、targetオブジェクトのresultプロパティに読み込まれた画像ファイルや映像ファイルが「data:～」形式で格納されています。dataURL形式になっているので、表示する場合は画像や映像の「src」属性に代入します。
<body>
<script>
window.addEventListener("load" , function(){
var ele = document.getElementsByTagName("output")[0];
//ボタンにイベントを設定
document.getElementById("readBtn").addEventListener("click", function(){
var fileList = document.getElementById("selFile").files;
//FileReaderオブジェクトを作成
var reader = new FileReader();
//ファイルが読み込まれた場合の処理を設定
reader.onload = function(evt){
var data = evt.target.result;
//img要素のsrcに代入し表示
document.getElementsByTagName("img")[0].src=data;
}
//ファイルの読込みを開始
reader.readAsDataURL(fileList[0]);
},false);
}, false);
</script>
<form>
<p><input type="file" id="selFile" multiple></p>
<input type="button" value="読み込み" id="readBtn">
</form>
<img src="images/dummy.png">
</body>ファイル選択ボタンをクリックして、バイナリファイルを選択します。
読み込みボタンをクリックすると、選択されたバイナリファイルが読み込まれ、先頭の8バイトが16進数で表示されます。
