原生js上传图片时的预览

公告

View Post

<!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') {
            window.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>
posted on 2017-12-15 19:49 凉梁凉糕阅读(285) 评论(0) 收藏举报
刷新页面返回顶部