html5获取上传图片的大小和即时显示

最新推荐文章于 2024-07-31 18:12:12 发布

爱笑的眼睛11

最新推荐文章于 2024-07-31 18:12:12 发布

阅读量3.7k

点赞数

分类专栏： web 文章标签： html5 图片浏览器

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近看到h5带有这个功能，效果如代码所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="file" multiple="multiple" οnchange="checkinfo(this)">
<div id="win"></div>
<script>
    function checkinfo(obj){
        var len = obj.files.length;
        console.log(obj.files);
        for (var i =0 ; i < len ; i++){
            showimg(obj.files[i]);
        }
    }

    function showimg(img){
        var a = new FileReader();
        a.readAsDataURL(img);
        a.onload=function(){
            var img = new Image();
            img.src=a.result;
            document.getElementById('win').appendChild(img);
        }
    }

</script>
</body>
</html>

转载 https://segmentfault.com/a/1190000004706880

https://developer.mozilla.org/en/docs/Web/API/FileReader

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

爱笑的眼睛11

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
html5获取上传图片的大小和即时显示

最近看到h5带有这个功能，效果如代码所示html>html lang="en">head> meta charset="UTF-8"> title>Titletitle>head>body>input type="file" multiple="multiple" onchange="checkinfo(this)">div id="win">div>scr
复制链接

扫一扫