前端实现图片上传预览

讲干货,不啰嗦,开发中有时会遇到上传图片并即时生成图片预览的需求,以下为具体实现,主要是应用FileReader对象,有需要的请拿走。

 

具体实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片上传预览</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<!--    设置input的type和accept,当然也可设置multiple允许多文件上传,这里不做设置-->
    <input type="file" accept="image/*" onchange="showImg(this)" />
    <h2>以下为预览效果:</h2>
    <img src="" alt="" id="img">
    <script>
        function showImg(obj) {
            var file=$(obj)[0].files[0];    //获取文件信息
            var imgdata='';
            if(file)
            {
                var reader=new FileReader();  //调用FileReader
                reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
                reader.onload=function(evt){   //读取操作完成时触发。
                    $("#img").attr('src',evt.target.result)  //将img标签的src绑定为DataURL
                };
            }
            else{
                alert("上传失败");
            }
        }
    </script>
    <style>
        img{
            width: 400px;
        }
    </style>
</body>
</html>

 

测试结果:

 

能力有限,水平一般,错误之处,欢迎指正,感谢关注和评论!

 

 

posted @ 2019-07-26 10:53  伤心小王子  阅读(9436)  评论(1编辑  收藏  举报