欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端实现图片上传预览

程序员文章站 2024-01-01 15:57:40
讲干货,不啰嗦,开发中有时会遇到上传图片并即时生成图片预览的需求,以下为具体实现,主要是应用FileReader对象,有需要的请拿走。 具体实现: 测试结果: 能力有限,水平一般,错误之处,欢迎指正,感谢关注和评论! ......

讲干货,不啰嗦,开发中有时会遇到上传图片并即时生成图片预览的需求,以下为具体实现,主要是应用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>

 

测试结果:

前端实现图片上传预览前端实现图片上传预览

 

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

 

 

上一篇:

下一篇: