html input file 預覽圖片

html:

<input type="file" id="filechooser" />
<img alt="Image Previewer" id="previewer">

js:

var filechooser = document.getElementById('filechooser');
var previewer = document.getElementById('previewer');

filechooser.onchange = function() {
    var files = this.files;
    var file = files[0];

    // 接受 jpeg, jpg, png 类型的图片
    if (!/\/(?:jpeg|jpg|png)/i.test(file.type)) return;

    var reader = new FileReader();

    reader.onload = function() {
        var result = this.result;

        previewer.src = result;

        // 清空图片上传框的值
        filechooser.value = '';
    };

    reader.readAsDataURL(file);
};

做成function ，帶ID進來使用
function show_top_pic_img(f,p){

var filechooser = document.getElementById(f);
var previewer = document.getElementById(p);


   var files = filechooser.files;
   var file = files[0];
   console.log(files);
   // 接受 jpeg, jpg, png 类型的图片
   if (!/\/(?:jpeg|jpg|png)/i.test(file.type)) return;

   var reader = new FileReader();

   reader.onload = function() {
       var result = this.result;

       previewer.src = result;

       // 清空图片上传框的值
       // filechooser.value = '';
   };

   reader.readAsDataURL(file);

}


jQuery 寫法
$('.img_input').on('change',function(){
var _this = $(this);
var file = $(this)[0].files[0];
var previewer = $(this).closest('div').find('.previewer');
console.log(previewer);
//接受 jpeg, jpg, png 类型的图片
if (!/\/(?:jpeg|jpg|png)/i.test(file.type)) return;

    var reader = new FileReader();

   reader.onload = function() {
       var result = this.result;
       // console.log(result);
       previewer.attr('src',result);

       // 清空图片上传框的值
       // filechooser.value = '';
   };

   reader.readAsDataURL(file);

});