js input上传图片预览

狂野小青年

于 2016-11-18 14:28:46 发布

阅读量2k

点赞数

分类专栏： web前端文章标签： web前端

本文链接：https://blog.csdn.net/veloi/article/details/53216031

版权

web前端专栏收录该内容

40 篇文章 1 订阅

订阅专栏

<html>  
<head>  
<script type="text/javascript" src="jquery.min.js"></script>  
<script>  
$(function(){  
    $("#pstimg").change(function(){  
        var file = this.files[0];  
        alert("文件大小:"+(file.size / 1024).toFixed(1)+"kB");  
        if (window.FileReader) {  
            var reader = new FileReader();  
            reader.readAsDataURL(file);  
            //监听文件读取结束后事件  
            reader.onloadend = function (e) {  
                showXY(e.target.result,file.fileName);  
            };  
        }  
    });  
});  
function showXY(source){  
    var img = document.getElementById("loc_img");  
    img.src = source;  
    alert("Width:"+img.width+", Height:"+img.height);  
}  
</script>  
</head>  
<body>  
<input type="file" name="pstimg" id="pstimg"/>  
<img src="" id="loc_img" />  
<body>  
</html>