图片上传预览效果

最新推荐文章于 2020-03-18 14:37:08 发布

酷jjs

最新推荐文章于 2020-03-18 14:37:08 发布

阅读量451

点赞数

分类专栏：前端笔记组件文章标签：组件

本文链接：https://blog.csdn.net/qq_32584661/article/details/70207593

版权

前端笔记同时被 2 个专栏收录

165 篇文章 2 订阅

订阅专栏

组件

3 篇文章 0 订阅

订阅专栏


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片上传预览</title>
    <script src="js/jquery.min.js"></script>
    <style>

        #img{width:100px;height:100px;border:1px solid #000000;}
    </style>
</head>
<body>

<img src="" alt="" id="img">
<input id="uploadImage" type="file" />

<script>

    $("#uploadImage").on("change", function(){

        // Get a reference to the fileList   获取文件列表的引用
        var files = !!this.files ? this.files : [];

        // If no files were selected, or no FileReader support, return如果没有选择任何文件,或者没有FileReader支持
        if (!files.length || !window.FileReader) return;

        // Only proceed if the selected file is an image
        if (/^image/.test( files[0].type)){

            // Create a new instance of the FileReader
            var reader = new FileReader();

            // Read the local file as a DataURL
            reader.readAsDataURL(files[0]);

            // When loaded, set image data as background of div
            reader.onloadend = function(){

                $("#uploadPreview").css("background-image", "url("+this.result+")");
                $("#img").attr("src", this.result);
            }

        }

    });


</script>



</body>
</html>

效果图显示：

这里写图片描述

酷jjs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片上传预览效果

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>图片上传预览</title> <script src="js/jquery.min.js"></script> <style> #img{width:100px;height:100px;border:1px sol
复制链接

扫一扫