HTML 5 で追加された FileReader を利用すると JavaScript からローカルファイルの一部にアクセスすることができるようになります。一般的にはアップロードするファイルを事前にプレビューするなどの用途でよく使われます。
下記サンプルはファイル選択時に画像プレビューを表示するプログラムです。
古いブラウザでは FileReader が利用できないためその場合は何もしない点に注意して下さい。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | <! DOCTYPE html> < html > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "ie=edge" > < title >Preview Demo</ title > < script > document.addEventListener('DOMContentLoaded', function(){ // アップロードボタン var fileSelector = '.image-upload'; // プレビュー画像のクラス名 var previewSelector = '.preview'; // プレビューするファイルタイプ var fileTypes = [ 'image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/bmp' ]; if( typeof FileReader == 'undefined' ){ return; } var reader = new FileReader(); reader.addEventListener('load', function(event) { preview.setAttribute('src', event.target.result); }); var fileInputs = document.querySelectorAll(fileSelector); for(var i = 0; i < fileInputs.length ; i++){ var fileInput = fileInputs [i]; var input = fileInput .querySelector('input'); var preview = fileInput .querySelector(previewSelector); if(!preview) return; preview.setAttribute('data-fallback-src', preview.getAttribute('src')); input.addEventListener('change', function(){ if(input.files && input.files[0] && fileTypes.indexOf(input.files[0].type) >= 0) { reader.readAsDataURL(input.files[0]); } else { preview.setAttribute('src', preview.getAttribute('data-fallback-src')); } }); } }); </ script > < style > .image-upload .preview { display: block; width: 100%; max-width: 100px; height: auto; } </ style > </ head > < body > < div class = "image-upload" > < img class = "preview" src = "noimage.jpg" alt = "Preview" > < input name = "image" type = "file" > </ div > </ body > </ html > |