1. 程式人生 > >前臺上傳時的圖片預覽

前臺上傳時的圖片預覽

<!DOCTYPE html>  
<html>  
<head>  
<script src="jQuery.js"></script>
<meta charset=utf-8 />  
<title>JS Bin</title>  
<style>  
 
</style>  
</head>  
<body>  
<input type='file' onchange="readURL(this);" id='changeimg'/>  
<img id="img_prev" src="#" alt="your image" />  
</body>  
<script>
    $(function(){
        $('#img_prev').css('display','none');
        $('#changeimg').change(function(){
            $('#img_prev').css('display','block');
        });
    })   
</script>
<script>  
    function readURL(input) {  
        if (input.files && input.files[0]) {  
            var reader = new FileReader();  
            reader.onload = function (e) {  
            $('#img_prev')  
            .attr('src', e.target.result)  
            .width(150)  
            .height(200);  
            };  
            reader.readAsDataURL(input.files[0]);  
        }  
    }  
</script> 
</html>

資料連結

本文章屬於轉載文章。