【HTML5】readAsDataURLを使った画像のプレビュー

```html:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>

<form id="zz" enctype="multipart/form-data">
<ol>
<li><input  type="file" size="30" name="fileToUpload[]" id="jack0"></li>
<li><input  type="file" size="30" name="fileToUpload[]" id="jack1"></li>
<li><input  type="file" size="30" name="fileToUpload[]" id="jack2"></li>
<li><input  type="file" size="30" name="fileToUpload[]" id="jack3"></li>
<li><input  type="file" size="30" name="fileToUpload[]" id="jack4"></li>
<li><input  type="file" size="30" name="fileToUpload[]" id="jack5"></li>
</ol>
</form>

<br/>
<br/>

<div id="aa">
</div>

<br/>
<br/>

<div id="aa2">
</div>

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">

function DownloadSize(size) {

    var sizes =['(B)', '(KB)', '(MB)', '(GB)', '(TB)', '(PB)', '(EB)'];
    var ext = sizes[0];

    if(typeof size==='number'){
        for (var i=1;i< sizes.length;i+=1){
            if(size>= 1024){
                size = size / 1024;
                ext = sizes[i];
            }
        }
    }

  return round(size, 2)+ext;
}

function round (value, precision, mode) {
  // http://kevin.vanzonneveld.net
  // +   original by: Philip Peterson
  // +    revised by: Onno Marsman
  // +      input by: Greenseed
  // +    revised by: T.Wild
  // +      input by: meo
  // +      input by: William
  // +   bugfixed by: Brett Zamir (http://brett-zamir.me)
  // +      input by: Josep Sanz (http://www.ws3.es/)
  // +    revised by: Rafa? Kukawski (http://blog.kukawski.pl/)
  // %        note 1: Great work. Ideas for improvement:
  // %        note 1:  - code more compliant with developer guidelines
  // %        note 1:  - for implementing PHP constant arguments look at
  // %        note 1:  the pathinfo() function, it offers the greatest
  // %        note 1:  flexibility & compatibility possible
  // *     example 1: round(1241757, -3);
  // *     returns 1: 1242000
  // *     example 2: round(3.6);
  // *     returns 2: 4
  // *     example 3: round(2.835, 2);
  // *     returns 3: 2.84
  // *     example 4: round(1.1749999999999, 2);
  // *     returns 4: 1.17
  // *     example 5: round(58551.799999999996, 2);
  // *     returns 5: 58551.8
  var m, f, isHalf, sgn; // helper variables
  precision |= 0; // making sure precision is integer
  m = Math.pow(10, precision);
  value *= m;
  sgn = (value > 0) | -(value < 0); // sign of the number
  isHalf = value % 1 === 0.5 * sgn;
  f = Math.floor(value);

  if (isHalf) {
    switch (mode) {
    case 'PHP_ROUND_HALF_DOWN':
      value = f + (sgn < 0); // rounds .5 toward zero
      break;
    case 'PHP_ROUND_HALF_EVEN':
      value = f + (f % 2 * sgn); // rouds .5 towards the next even integer
      break;
    case 'PHP_ROUND_HALF_ODD':
      value = f + !(f % 2); // rounds .5 towards the next odd integer
      break;
    default:
      value = f + (sgn > 0); // rounds .5 away from zero
    }
  }

  return (isHalf ? value : Math.round(value)) / m;
}

var preview_img=function(){

    var that={},my={};

        my.number=6,
        my.height_s=0,
        my.width_s=0;

        my.get_number=function(){
            return this.number;
        };

        my.get_height_s=function(){
            return this.height_s;
        };
	
        my.get_width_s=function(){
            return this.width_s;
        };

        my.set_pre_img_HW=function(height,width){

            var width_s,height_s;

            //height:width=height_s:width_s
            //width*height_s=width_s*height

            if(height>width){
                height_s=300;
                width_s=(width*height_s)/height;
            }else{
                width_s=300;
                height_s=(width_s*height)/width;
            }

            if(typeof height_s === 'number' && typeof width_s === 'number'){
                my.height_s = height_s;
                my.width_s = width_s;
            }
        };

	my.preview_image=function(input,t){

            var file_number=0;
            var file = input.files[0];
            var reg=/^image\/(png|jpeg|gif|bmp)$/;
            var reg2=/(.+)(\d+$)/;
            var reader = new FileReader;
            var onLoad_Reader={};
            var id=0;

            // typeプロパティでMIMEタイプを参照
            if (reg.test(file.type)){

                //idから数字部分を抜き出す
                id=parseInt(input.id.match(reg2)[2],10);

                if(typeof id === 'number'){
                    file_number = id + 1;
                    onLoad_Reader = {file_number:file_number,
                                     name:file.name,
                                     type:file.type,
                                     size:NaN,
                                     handleEvent:this.pre_img};
                    reader.addEventListener('load', onLoad_Reader, false);
                    reader.readAsDataURL(file);
                }

            }

	};

	my.pre_img=function(e){

            var t = e.target;
            var img;

            if (t instanceof FileReader) {

                this.size = e.total;
                img = new Image;
                img.addEventListener('load', this, false);
                img.src = t.result;

            }

            if (t instanceof Image) {

                img =t;

                var height=img.naturalHeight,
                    width=img.naturalWidth;

                //プレビュー画像の縦横の長さを決める
                my.set_pre_img_HW(height,width);

                var height_s =my.get_height_s(),
                    width_s = my.get_width_s();

                $("#aa").html('No: ' + this.file_number + '\n<br />' +
                              'File name: ' + this.name   + '\n<br />' +
                              'File type: ' + this.type   + '\n<br />' +
                              'Size:'  + DownloadSize(this.size) + '<br />\n' +
                              'Width:'  + width+"\n<br/>"+
                              'Height:'  + height);

                $("#aa2").html('<img src="'+img.src+'" width="'+ width_s+ '" height="'+ height_s+'" >\n');

            }

    };

    that.init=function(){
        var number=my.get_number();
        for(var i=0;i<number;i+=1){
            var name="#jack"+i;
            $(name).mouseover(function(){my.preview_image(this,number);});
            $(name).change(function(){my.preview_image(this,number);});
        }
    };

    return that;

}();

$(function(){
preview_img.init();
});

</script>

</body>
</html>


```

##解説
選択した画像の名前、種類、容量、幅、高さを表示し、readAsDataURLを使って画像のプレビューを行う。

##画面のイメージ
![名称未設定.jpg](https://qiita-image-store.s3.amazonaws.com/0/38271/e7a8d9a3-fbc6-1cc4-982a-cbb14231e506.jpeg)

##参考文献
[ヤフー知恵袋][1]
[JavaScript round function - php.js][2]

##関連
[【Javascript】バイト変換 - Qiita][3]

##使ったフリー素材(猫の写真)
[写真素材ぱくたそ][4]

[1]:http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1178374291
[2]:http://phpjs.org/functions/round/
[3]:http://qiita.com/kyoshiro-obj/items/aa34af6e67966de7ef0b
[4]:https://www.pakutaso.com/