上传图片图片预览功能

最新推荐文章于 2020-03-17 21:27:03 发布

姜腾腾

最新推荐文章于 2020-03-17 21:27:03 发布

阅读量381

点赞数

分类专栏：经验总结记录

本文链接：https://blog.csdn.net/jw137323668/article/details/77333313

版权

经验总结记录专栏收录该内容

9 篇文章 1 订阅

订阅专栏

有时候，我们在上传图片的时候，想要预览我们上传的图片是不是我们传的那张，现在我们来记录一下实现过程，这个方法也是我在网上找到的，不过改良了一下下，可以调用可以传参。

用到的技术点：

html5：<input type="file" name="file" />（使用input上传文件的属性）

FileReader：用于读取文件

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>上传照片</title>
    <style>
    .uploadimg {
        width: 300px;
        height: 300px;
        border: 1px solid #ccc;
    }

    .uploadimg div {
        position: relative;
        width: 100%;
        height: 238px;
        overflow: hidden;
    }

    .uploadimg div img {
        width: 300px;
        height: 200px;
        color: #ccc;
    }

    .uploadimg div input {
        position: absolute;
        width: 100%;
        height: 238px;
        top: 0;
        padding-top: 205px;
        outline: none;
        cursor: pointer;
        z-index: 10;
    }
    </style>
</head>

<body>
    <div class="uploadimg" id="uploadImg">
        <h3>照片上传</h3>
        <div>
            <img alt="请上传照片" src="" />
            <br />
            <input type="file" name="file" />
        </div>
    </div>
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
        $(".uploadimg input").change(function() {
            var imgdom = $(".uploadimg img");
            var filedom = $(".uploadimg input");
            imgPreview(filedom, imgdom);
        });
    });
    var imgPreview = function(fileDom, imgDom) {
        //判断是否支持FileReader
        if (window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }
        //获取文件
        var file = fileDom.context.activeElement.files[0];
        var imageType = /^image\//;
        //判断是否是图片
        if (!imageType.test(file.type)) {
            alert('请选择图片！');
            return;
        }
        //判断图片是否大于2M
        if (file.size >= 2097152) {
            alert('图片大小不能超过2M！');
            return;
        }
        //读取完成
        reader.onload = function(e) {
            //图片路径设置为读取的图片
            imgDom[0].src = e.target.result;
        };
        reader.readAsDataURL(file);
    };
    </script>
</body>

</html>

上面的方法中，我在css中，设置了input的样式，这样可以点击整个图片区域的时候，都能打开文件夹上传图片，在下面的js代码中，我对上传的是否为图片类型以及图片的大小也做了判断，简单的图片预览功能就实现了~而且拿到的图片还是base64编码的哦~

添加一条~input上传文件控件在各浏览器里显示不一，会有兼容问题，可以将此控件的透明度设为0，然后在这个控件的下层加一个按钮什么的，样式可以根据需要自己来设定，可以解决控件样式兼容的问题~