js本地预览图片 | 易学教程

废话不说直接上代码

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<body>
<img id="image" src=""/>
<br/>
<input type="file" id="file" onchange="selectImage(this);"/> <br>
<br/>
<script>
    function selectImage(file) {
        alert(file.value.substring(file.value.lastIndexOf('.')));
        if (!file.files || !file.files[0]) {
            return;
        }

        var reader = new FileReader();
        reader.onload = function (evt) {
            var data = evt.target.result;
            //加载图片获取图片真实宽度和高度
            var image = new Image();

            image.onload=function(){
                var width = image.width;
                var height = image.height;
                alert(width+'======'+height+"====="+file.files[0].size);
            };

            image.src= data;
            document.getElementById('image').src = evt.target.result;
        }

        reader.readAsDataURL(file.files[0]);
        $("#image").attr({'width':'100px','height':'100px'});
    }
</script>
</body>
</html>

来源：https://www.cnblogs.com/wodetian/p/6491197.html

标签

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!