HTML 5 で追加された FileReader を利用すると JavaScript からローカルファイルの一部にアクセスすることができるようになります。一般的にはアップロードするファイルを事前にプレビューするなどの用途でよく使われます。
下記サンプルはファイル選択時に画像プレビューを表示するプログラムです。
古いブラウザでは FileReader が利用できないためその場合は何もしない点に注意して下さい。
<!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>
Similar Posts:
- [JS][jQuery]フォームから複数のファイルをアップロード(入力欄の動的追加)
- [PHP]画像ファイルのアップロードとGDを使ったリサイズ
- Flash ファイルアップロード AS3.0
- [JS]アニメーション付きで要素の上下を入れ替える
- [PHP]似た画像を検索して近い順番に並べる（類似画像検索）
- [PHP]GDで作った画像をファイル化せずに直接<img>タグで表示する
- [PHP][HTML, CSS]画像を隙間なく並べて表示
- [PHP]HSV(HSB)色空間を比較して似た色合いの画像を検索する
