上传图片和预览

Posted 2020-10-17 凉梁凉糕

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了上传图片和预览相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>checkbox -value </title>
    <link rel="stylesheet" href="">
    <script src=‘./jquery-1.7.1.min.js‘></script>
    <style type="text/css">
    .showImg {}

    .showImg img {
        width: 50px;
        height: 50px;
    }
    </style>
</head>
<body>
    <div class="main">
        <label for="imgfile"><span class="fakeButton">Insert Images</span></label>
        <!-- 下面为了避免中文，由上面替换 -->
        <!-- <input type="file" accept="image/jpeg,image/png,image/gif" name="imgfile" id="imgfile" multiple value="Insert Image" onchange="javascript:setImagePreview();" style="position:absolute;clip:rect(0 0 0 0);"> -->
        <input type="file" accept="image/jpeg,image/png,image/gif" name="imgfile" id="imgfile" multiple onchange="javascript:setImagePreview();">
        <br />
        <div id="showImg" class="showImg"></div>
    </div>
    <script type="text/javascript">
    function setImagePreview() {
        var imghtml = imgUrls();
        if (imghtml === ‘111‘) {
            $.messager.alert(‘Notice‘, ‘You can upload up to three photos‘);
            return false;
        }
        $(‘#showImg‘).html(imghtml);
    }
// 限制传递图片的张数
    function imgUrls() {
        var imgsrcs = getUrl();
        var imghtml = ‘‘;
        var len = imgsrcs.length;
        if (len > 3) {
            return ‘111‘;
        }
        for (var i = 0; i < len; i++) {
            imghtml += ‘<img src=‘ + imgsrcs[i] + ‘ alt="you have selected">&nbsp;&nbsp;‘;
        }
        return imghtml;
    }

    function getUrl() {
        var obj = $(‘#imgfile‘)[0].files;
        var len = obj.length;
        var imgsrcs = [];
        for (var i = 0; i < len; i++) {
            imgsrcs[i] = getObjectURL(obj[i]);
        }
        //添加图片路径到img src中进行预览
        //不同浏览器下的路径不同
        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }

        return imgsrcs;
    }
    </script>
</body>

</html>

以上是关于上传图片和预览的主要内容，如果未能解决你的问题，请参考以下文章

带预览和删除、Jquery 和 Javascript 的多张图片上传

jquery实现上传图片及图片大小验证图片预览效果代码