[javascript]上傳圖片預覽

html部分:

<div>

<img class="img_preview" style="max-width: 150px; max-height: 150px;" src="xxx.png">

<div class="img_size"></div>

<input type="file" name="img_upload" id="img_upload">

</div>

javascript部分:

jQuery(document).ready(function() {

 

  function img_preview(input){

    if (input.files && input.files[0]) {

      var reader = new FileReader();

      reader.onload = function (e) {

        jQuery('.img_preview').attr('src', e.target.result);

        var kb = format_float(e.total / 1024, 2);

        jQuery('.img_size').text("檔案大小：" + kb + " KB");

      }

      reader.readAsDataURL(input.files[0]);

    }

  }

 

  jQuery("body").on("change", "#img_upload", function (){

   img_preview(this);

  });

});