问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
cheng153
    11122330

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

    htmljavajavascript
    阅读 5.4k
    1 个回答
    得票最新
    头像
    小狗快跑嘟嘟
      2.8k11326

      利用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>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题