jQueryを使ってinputのtype="file"の画像をその場ですぐに表示する方法です。
4種類ほどの方法を紹介したいと思います。
window.URL.createObjectURLを使った表示方法
<script type="text/javascript">
$(function(){
$('#GAZOU').change(function(){
window.URL = window.URL || window.webkitURL;
if(window.URL){
var IMGFILE = $('input[name="GAZOU"]').prop('files')[0];
var IMGURL = window.URL.createObjectURL(IMGFILE);
$('#DISP_GAZOU').attr("src", IMGURL).onload = function(){
window.URL.revokeObjectURL(IMGURL);
};
}else{
alert("ブラウザがサムネ表示に対応していません(´；ω；｀)");
}
});
});
</script>
<input type="file" name="GAZOU">
<img id="DISP_GAZOU">
これは、URLスキームを使った表示方法です。ポイントはwindow.URL.createObjectURLで作成したオブジェクト
URLをwindow.URL.revokeObjectURLによって解放させます。
Chromeで確認する場合は「chrome://blob-internals/」をアドレスバーに打つことによって作成したすべての Blob URL を確認することが出来ます。
参考サイト：Web アプリケーションからファイルを扱う
window.FileReaderを使った表示方法
<script type="text/javascript">
$(function(){
$('#GAZOU').change(function(){
if(window.File && window.FileReader) {
var IMGFILE = $('input[name="GAZOU"]').prop('files')[0];
var fileReader = new FileReader();
fileReader.readAsDataURL(IMGFILE);
fileReader.onload = function (ev) {
$('#DISP_GAZOU').attr("src", ev.target.result);
};
}else{
alert("ブラウザがサムネ表示に対応していません(´；ω；｀)");
}
});
});
</script>
<input type="file" name="GAZOU">
<img id="DISP_GAZOU">
<p>file.html</p>
これはwindow.FileReaderを使ってのBlob や File オブジェクトの読み取りアクセスによる表示方法です。
readAsDataURLメソッドは、blobのURLスキーマを取得できます。読み込み成功した場合onloadイベントが発生し、resultプロパティから結果を得ることが出来ます。
参考サイト：JavaScriptプログラミング講座【FileReader について】
ajaxを使った表示方法
<script type="text/javascript">
$(function(){
$('#GAZOU').change(function(){
if(window.FormData){
var IMGFILE = $('input[name="GAZOU"]').prop('files')[0];
var fd = new FormData();
fd.append("GAZOU", IMGFILE);
$.ajax({
url:'img.php',
type: 'POST',
processData: false,
contentType: false,
data: fd,
success: function(data) {
$('#DISP_GAZOU').attr("src", data);
}
});
}else{
alert("ブラウザがサムネ表示に対応していません(´；ω；｀)");
}
});
});
</script>
<input type="file" name="GAZOU">
<img id="DISP_GAZOU">
<?php
try{
$IMGFILE = fopen($_FILES['GAZOU']['tmp_name'], "r");
$contents = fread($IMGFILE, $_FILES['GAZOU']['size']);
while (@ob_end_clean());
echo 'data:'. $_FILES['GAZOU']['type'] .';base64, ' . base64_encode($contents);
} catch (Exception $e) {
}
?>
これはajaxによるPOST送信での画像表示です。ポイントとしては、「processData: false, contentType: false」を設定することです。送信データを変換せずにオブジェクトとして渡しています。
$.postで簡潔に使いたいところですが、$.ajaxでオプションを設定して渡す必要があります。
iframeを使った表示方法（IE等でどうしても表示させたい場合）
<script type="text/javascript">
$(function(){
$('#GAZOU').change(function(){
$('#main').attr("target", "myframe");
$('#main').attr("action", "img.php");
$('#main').submit();
});
});
function imgCallback(img){
$('#DISP_GAZOU').attr("src", img.attr("src"));
alert("iframeを削除します");
$('#div_frame').remove();
}
</script>
<form action="img.php" method="post" enctype="multipart/form-data" id="main">
<input type="file" name="GAZOU">
</form>
<img id="DISP_GAZOU">
<div id="div_frame">
<iframe name="myframe" scrolling="no" frameborder="0"></iframe>
</div>
<?php
try{
$IMGFILE = fopen($_FILES['GAZOU']['tmp_name'], "r");
$contents = fread($IMGFILE, $_FILES['GAZOU']['size']);
while (@ob_end_clean());
//echo 'data:'. $_FILES['GAZOU']['type'] .';base64, ' . base64_encode($contents);
} catch (Exception $e) {
}
?>
<!doctype html>
<HTML>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
parent.imgCallback($('#FRAM_IMG'));
});
</script>
<body>
<?php echo '<img src="data:'. $type .';base64, ' . base64_encode($contents) . '" id="FRAM_IMG">'; ?>
</body>
</html>
これはiframeに対応しているブラウザで表示可能なのでどうしても表示させたいときの表示方法です。
IE5、android2.3の標準ブラウザで表示可能です。
手順としては、以下のようになります。
- formのtargetにiframeを指定
- formをsubmitするとiframe内に反映される
- img.phpで画像表示し親フレームの関数を使用
- 親フレームでは引数としてobjectを受け取れるのでimgタグをそのまま受け取って処理
- divごとiframeを削除。
※なぜか直のiframeには.removeや.html("")、.replaceWith("")が効きませんでした。
ポイントとしては親のフレームに要素を渡す場合、子のiframe側からならpostで受け取った結果を渡せるということです。