前台上传图片显示分辨率。

现在有个需求就是在网页上上传一张图片，然后在下边显示它的分辨率，就是大小，求大神说下怎么做。兼容IE的情况下怎么做，现在是调用一个方法，处理了一下，但是这个方法调用比较多我也不敢随便改

利用html5中的FileApi可以实现（你没有说不能用），

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Upload</title>
    <script type="text/javascript">
        //上传时追加图片
        function ok(){
            var file = document.getElementById("file").files[0];  
            if(!/image\/\w+/.test(file.type)){  
                alert("不是图片");
                return;
            }
            console.log(file);
            var reader = new FileReader();  
            reader.readAsDataURL(file);  
            reader.onload=function(e){  
                var result=document.getElementById("result"); 
                result.innerHTML='<img src="' + this.result +'" onload="test(this)" id="append" alt="" />';
            }
        }
        
        //追加后显示宽高，如果你想进行其他操作在这里进行
        function test(e){
            console.log(e.height);
            console.log(e.width);
        }
    </script>
</head>
<body>
    <form action="">
        <input type="file" onchange="ok()" id="file">
    </form>
    <div id="result"></div>
</body>

</html>

【热门文章】