jQueryを使った画像表示方法
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">
<p>file.html</p>
これは、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プロパティから結果を得ることが出来ます。
参考サイト：
[http://hakuhin.jp/js/file_reader.html](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を使った表示方法
<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で受け取った結果を渡せるということです。