html file選中圖片后 不經過服務器 立刻顯示在頁面

html結構中 file類型加上 onchange事件 ,用FileReader讀取圖片的data:/images，然后顯示在img標簽中，

代碼如下:

<img class="preview" style="width:150px;" src="<?=IMG_URL.$cost['cover'].'_s.jpg';?>"><br><br>
<input type="file" name="cover" onchange="preview(this)"/>
<script>
    function preview(file){  
        var prevDiv = document.getElementById('preview');  
        if (file.files && file.files[0]){  
            var reader = new FileReader();  
            reader.onload = function(evt){  
            // prevDiv.innerHTML = '<img width="100%" height="100%" id="qw_img" src="' + evt.target.result + '" />';
            $('.preview').attr('src' , evt.target.result);
        }    
             reader.readAsDataURL(file.files[0]);  
        }else{  
            // prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';  
          $('.preview').attr('src' , file.value);
        }  
    }  
</script>