分享一个上传图片并预览的前端代码

1.上传图片并预览

2.图片被转为二进制Blob

3.需要引用jQuery.js文件

4.效果图:

5.js代码:

$(function () {
    var delParent;
    var defaults = {
        fileType: ["jpg", "png", "bmp", "jpeg"],   // 上传文件的类型
        fileSize: 1024 * 1024 * 10                  // 上传文件的大小 10M
    };
    /*点击图片的文本框*/
    $(".file").change(function () {
        var idFile = $(this).attr("id");
        var file = document.getElementById(idFile);
        var imgContainer = $(this).parents(".z_photo"); //存放图片的父亲元素
        var fileList = file.files; //获取的图片文件
        var input = $(this).parent();//文本框的父亲元素
        var imgArr = [];
        //遍历得到的图片文件
        var numUp = imgContainer.find(".up-section").length;
        var totalNum = numUp + fileList.length;  //总的数量
        if (fileList.length > 5 || totalNum > 5) {
            alert("上传图片数目不可以超过5个，请重新选择");  //一次选择上传超过5个 或者是已经上传和这次上传的到的总数也不可以超过5个
        }
        else if (numUp < 5) {
            fileList = validateUp(fileList);
            for (var i = 0; i < fileList.length; i++) {
                var imgUrl = window.URL.createObjectURL(fileList[i]);
                imgArr.push(imgUrl);
                var $section = $("<section class='up-section fl loading'>");
                imgContainer.prepend($section);
                var $span = $("<span class='up-span'>");
                $span.appendTo($section);

                var $img0 = $("<img class='close-upimg'>").on("click", function (event) {
                    event.preventDefault();
                    event.stopPropagation();
                    $(".works-mask").show();
                    delParent = $(this).parent();
                });
                $img0.attr("src", "img/a7.png").appendTo($section);
                var $img = $("<img class='up-img up-opcity'>");
                $img.attr("src", imgArr[i]);
                $img.appendTo($section);
                var $p = $("<p class='img-name-p'>");
                $p.html(fileList[i].name).appendTo($section);
                var $input = $("<input id='taglocation' name='taglocation' value='' type='hidden'>");
                $input.appendTo($section);
                var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>");
                $input2.appendTo($section);

            }
        }
        setTimeout(function () {
            $(".up-section").removeClass("loading");
            $(".up-img").removeClass("up-opcity");
        }, 450);
        numUp = imgContainer.find(".up-section").length;
        if (numUp >= 5) {
            $(this).parent().hide();
        }
    });



    $(".z_photo").delegate(".close-upimg", "click", function () {
        $(".works-mask").show();
        delParent = $(this).parent();
    });

    $(".wsdel-ok").click(function () {
        $(".works-mask").hide();
        var numUp = delParent.siblings().length;
        if (numUp < 6) {
            delParent.parent().find(".z_file").show();
        }
        delParent.remove();
    });

    $(".wsdel-no").click(function () {
        $(".works-mask").hide();
    });

    function validateUp(files) {
        var arrFiles = [];//替换的文件数组
        for (var i = 0, file; file = files[i]; i++) {
            //获取文件上传的后缀名
            var newStr = file.name.split("").reverse().join("");
            if (newStr.split(".")[0] != null) {
                var type = newStr.split(".")[0].split("").reverse().join("");
                console.log(type + "===type===");
                if (jQuery.inArray(type, defaults.fileType) > -1) {
                    // 类型符合，可以上传
                    if (file.size >= defaults.fileSize) {
                        alert(file.size);
                        alert('您这个"' + file.name + '"文件大小过大');
                    } else {
                        // 在这里需要判断当前所有文件中
                        arrFiles.push(file);
                    }
                } else {
                    alert('您这个"' + file.name + '"上传类型不符合');
                }
            } else {
                alert('您这个"' + file.name + '"没有类型, 无法识别');
            }
        }
        return arrFiles;
    }
});

6.Html代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>上传图片</title>
<style type="text/css">
    * {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        /* Firefox */
        -webkit-box-sizing: border-box;
        /* Safari */
    }

    .up-section .type-upimg {
        display: none;
    }

    ::-ms-clear, ::-ms-reveal {
        display: none;
    }

    textarea {
        outline: none;
        line-height: 14px;
        padding-left: 4px;
        padding-top: 4px;
        border: 1px solid #ccc;
        color: #444;
        font-size: 14px;
        outline: none;
        text-align: left;
    }

    .overflow {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    button {
        outline: none;
        border: 0px;
        font-family: "微软雅黑", "PingFang SC", "arial, helvetica, sans-serif";
    }

    input {
        font-family: "微软雅黑", "PingFang SC", "arial, helvetica, sans-serif";
        outline: none;
    }

    a {
        outline: none;
    }

    a, button {
        cursor: pointer;
    }

    body {
        background: #f4f4f4;
        font-size: 14px;
        font-family: "微软雅黑", "PingFang SC", "arial, helvetica, sans-serif";
    }

    .clear {
        clear: both;
    }

    .full {
        width: 1210px;
        min-width: 1210px;
        margin: 0 auto;
    }

    .full-big {
        width: 1340px;
        min-width: 1340px;
        margin: 0 auto;
    }

    .img-full {
        display: block;
        width: 100%;
    }

    ::-webkit-input-placeholder {
        color: #777;
        font-size: 14px;
    }

    :-moz-placeholder {
        /* Firefox 18- */
        color: #777;
        font-size: 14px;
    }

    ::-moz-placeholder {
        /* Firefox 19+ */
        color: #777;
        font-size: 14px;
    }

    :-ms-input-placeholder {
        color: #777;
        font-size: 14px;
    }
    /* ====clear float====== */
    /*nav a:visited{color: rgb(65,65,65);}
aside a:visited{color: rgb(65,65,65);}*/
    .fl {
        float: left;
    }

    .fr {
        float: right;
    }

    .clear:after {
        content: '';
        display: block;
        clear: both;
    }
    /* reset */
    .pic img {
        display: none;
    }

    i,
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    hr,
    br,
    em,
    dl,
    dd,
    li,
    ul,
    ol,
    td,
    th,
    pre,
    form,
    body,
    input,
    strong,
    textarea,
    select, figcaption, figure {
        margin: 0;
        padding: 0;
    }

    em {
        font-style: normal;
    }

    li {
        list-style: none;
    }

    a {
        text-decoration: none;
    }

    img {
        border: none;
    }

    table {
        border-collapse: collapse;
    }

    textarea {
        resize: none;
        overflow: auto;
    }

    a, button {
        cursor: pointer;
    }
    /*上传图片插件的样式*/
    .img-box {
        margin-top: 40px;
    }

        .img-box .up-p {
            margin-bottom: 20px;
            font-size: 16px;
            color: #555;
        }

    .z_photo {
        padding: 18px;
        border: 2px dashed #E7E6E6;
        /*padding: 18px;*/
    }

        .z_photo .z_file {
            position: relative;
        }

    .z_file .file {
        width: 100%;
        height: 100%;
        opacity: 0;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 100;
    }

    .z_photo .up-section {
        position: relative;
        margin-right: 20px;
        margin-bottom: 20px;
    }

    .up-section .close-upimg {
        position: absolute;
        top: 6px;
        right: 8px;
        display: none;
        z-index: 10;
    }

    .up-section .up-span {
        display: block;
        width: 100%;
        height: 100%;
        visibility: hidden;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 9;
        background: rgba(0,0,0,.5);
    }

    .up-section:hover {
        border: 2px solid #f15134;
    }

        .up-section:hover .close-upimg {
            display: block;
        }

        .up-section:hover .up-span {
            visibility: visible;
        }

    .z_photo .up-img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .loading {
        border: 1px solid #D1D1D1;
        background: url(../img/loading.gif) no-repeat center;
    }

    .up-opcity {
        opacity: 0;
    }

    .img-name-p {
        display: none;
    }

    .upimg-div .up-section {
        width: 190px;
        height: 180px;
    }

    .img-box .upimg-div .z_file {
        width: 190px;
        height: 180px;
    }

    .z_file .add-img {
        display: block;
        width: 190px;
        height: 180px;
    }
    /*遮罩层样式*/
    .mask {
        z-index: 1000;
        display: none;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.4);
    }

        .mask .mask-content {
            width: 500px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -250px;
            margin-top: -80px;
            background: white;
            height: 160px;
            text-align: center;
        }

            .mask .mask-content .del-p {
                color: #555;
                height: 94px;
                line-height: 94px;
                font-size: 18px;
                border-bottom: 1px solid #D1D1D1;
            }

    .mask-content .check-p {
        height: 66px;
        line-height: 66px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
    }

        .mask-content .check-p span {
            width: 49%;
            display: inline-block;
            text-align: center;
            color: #d4361d;
            font-size: 18px;
        }

    .check-p .del-com {
        border-right: 1px solid #D1D1D1;
    }
</style>
</head>
<body>

<div class="img-box full">
	<section class=" img-section">
		<p class="up-p">作品图片：<span class="up-span">最多可以上传5张图片，马上上传</span></p>
		<div class="z_photo upimg-div clear" >
			   <!--<section class="up-section fl">
					<span class="up-span"></span>
					<img src="/img/buyerCenter/a7.png" class="close-upimg">
					<img src="/img/buyerCenter/3c.png" class="type-upimg" alt="添加标签">
					<img src="/img/test2.jpg" class="up-img">
					<p class="img-namep"></p>
					<input id="taglocation" name="taglocation" value="" type="hidden">
					<input id="tags" name="tags" value="" type="hidden">
				</section>-->
				 <section class="z_file fl">
					<img src="img/a11.png" class="add-img">
					<input type="file" name="file" id="file" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple />
				 </section>
		 </div>
	 </section>
</div>
<aside class="mask works-mask">
	<div class="mask-content">
		<p class="del-p ">您确定要删除作品图片吗？</p>
		<p class="check-p"><span class="del-com wsdel-ok">确定</span><span class="wsdel-no">取消</span></p>
	</div>
</aside>

<script src="js/jquery.js"></script>
<script src="js/UpImg.js"></script>
</body>
</html>