投稿サイト等で選択された画像を確認のためにすぐに表示したいってことがあります。
なので今回はHTML5を使用して画像の即時読み込みを行います。

以下はサンプル

コード

<script>
$('.fileInput').change(function(){
	// ファイルが選択されていない
	if (!this.files.length) {
		return;
	}
 
	var file = this.files[0];// filesに格納されている
    
    // fileのtypeをチェックして画像以外は終了
    if(file.type != 'image/jpeg' && file.type != 'image/png'){
        alert('JPEG、PNGのみアップ可能です。');
        return;
    }
	var fileReader = new FileReader();   // ファイルを読み込むFileReaderオブジェクト
 
	// 読み込んだ完了時の実行ハンドラ
	fileReader.onload = function(event) {
		// 読み込んだデータをimgに設定
		$('#img').attr('src', event.target.result);
	};
 
	// 画像読み込み
	fileReader.readAsDataURL(file);
});
</script>
<!-- jQuery読み込み -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- ファイル選択-->
<input class="fileInput" type="file" /><br>
<!-- ファイル出力 -->
<img id="img" src="" alt="" />

HTML5のFileReaderを利用してファイルの読み込みを行っています。
ファイルのtypeをチェックしないとどんなファイルでもアップロードされてしまうので、typeもしくは拡張子を抜き出してチェックしてください。

もし、即時アップロードもしたい場合はハイライトにしている18～21行目の間でajaxにてアップロードしてください。


«前の記事：Javascriptで配列を扱うJavascriptで読み込んだ画像をモザイク化してみる。：次の記事»