jQueryを使った画像表示方法

# jQueryを使った画像表示方法

jQueryを使ってinputのtype="file"の画像をその場ですぐに表示する方法です。
4種類ほどの方法を紹介します。

## window.URL.createObjectURLを使った表示方法

```html
<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 を確認することが出来ます。<br>
参考サイト：[Web アプリケーションからファイルを扱う](https://developer.mozilla.org/ja/docs/Using_files_from_web_applications#Example:_Using_object_URLs_to_display_images)


## window.FileReaderを使った表示方法

```html
<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を使った表示方法

```html:file.html
<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:img.php
<?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を使った表示方法


```html:file.html
<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:img.php
<?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の標準ブラウザでも表示可能です。
手順としては、以下のようになります。

1. formのtargetにiframeを指定
2. formをsubmitするとiframe内に反映される
3. img.phpで画像表示し親フレームの関数を使用
4. 親フレームでは引数としてobjectを受け取れるのでimgタグをそのまま受け取って処理
5. divごとiframeを削除。（※なぜか直のiframeには`.remove`や`.html("")`、`.replaceWith("")`が効きませんでした。）

ポイントとしては親のフレームに要素を渡す場合、子のiframe側からならpostで受け取った結果を渡せるということです。