网页前端开发input图片上传并预览

hbuilder开发网页前端|网页前端开发学哪些|前端开发简历上一句话概括自己

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发求职简历模板下载</title>
</head>
<body>
    <input type=”file” id=”photo”>
    <div id=”click” style=”width: 200px; height: 200px; border: 1px solid #000;”></div>
    <script>
        document.getElementById(‘photo’).addEventListener(‘change’, function (e) {
            var files = this.files;
            var img = new Image();
            var reader = new FileReader();
            reader.readAsDataURL(files[0]);
            reader.onload = function (e) {
                var mb = (e.total / 1024) / 1024;
                if (mb >= 2) {
                    alert(‘文件大小大于2M’);
                    return;
                }
                img.src = this.result;
                img.style.width = “80%”;
                document.getElementById(‘click’).style.width = “200px”;
                document.getElementById(‘click’).style.height = “200px”;
                document.getElementById(‘click’).innerHTML = ”;
                document.getElementById(‘click’).appendChild(img);
            }
        });
    </script>
</body>
</html>

网页美工属于前端开发吗|简历模板-前端开发|web前端开发人员面试简历

» 本文来自:前端开发者 » 《网页前端开发input图片上传并预览》
» 本文链接地址:https://www.rokub.com/4973.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!