图片上传之前的预览问题

最新推荐文章于 2019-10-23 16:09:32 发布

方梦妍

最新推荐文章于 2019-10-23 16:09:32 发布

阅读量331

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_25846287/article/details/77679878

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

图片直接预览，不需要按按钮。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>laia</title>
        <style type="text/css">
            .con4{width: 300px;height:auto;overflow: hidden;margin: 20px auto;color: #ffffff;}
            .con4 .btn{width: 100%;height: 40px;line-height: 40px;text-align: center;background: #d8b49c;display: block;font-size: 16px;border-radius: 5px;}
            .upload{float: left;position: relative;}
            .upload_pic{display: block;width: 100%;height: 40px;position: absolute;left: 0;top: 0;opacity: 0;border-radius: 5px;}
            #cvs{border: 1px solid #000;margin: 20px 0 20px 50px;}
        </style>
    </head>
    <body>
        <div class="con4">
            <canvas id="cvs" width="200" height="200"></canvas>
            <span class="btn upload">上传头像<input type="file" class="upload_pic" id="upload" /></span>
        </div>
        <script type="text/javascript">
            var input1=document.getElementById("upload");
            if(typeof FileReader==='undefined'){
                input1.setAttribute('disabled','disabled');
            }else{
                input1.addEventListener('change',readFile,false);
            }
            function readFile(){
                var file=this.files[0];
                if(!/image\/\w+/.test(file.type)){
                    alert("文件必须为图片！");
                    return false;
                }
                var reader=new FileReader();
                reader.readAsDataURL(file);
                reader.οnlοad=function(e){
                    var image=new Image();
                    image.src=e.target.result;
                    var max=200;
                    image.οnlοad=function(){
                        var canvas=document.getElementById("cvs");
                        var ctx=canvas.getContext("2d");
                        ctx.clearRect(0,0,canvas.width,canvas.height);
                        ctx.drawImage(image,0,0,200,200);
                    };
                };
            };
        </script>
    </body>
</html>