2017/11/29

实用的jQuery图片上传预览删除效果

图片上传后让用户能看到自己上传的图片的缩略图，点击缩略图能预览大图效果，并且点击删除按钮能把该图片删除的一个效果

具体代码实现如下：

<p class="img-upload">

    <div class="page__bd">

        <div class="weui-gallery" id="gallery">

            <span class="weui-gallery__img" id="galleryImg"></span>

            <div class="weui-gallery__opr">

                <a href="javascript:" class="weui-gallery__del">

                    <i class="fa fa-trash-o" aria-hidden="true"></i>

                </a>

            </div>

        </div>

        <div class="weui-cells weui-cells_form">

            <div class="weui-cell">

                <div class="weui-cell__bd">

                    <div class="weui-uploader">

                        <div class="weui-uploader__bd">

                            <ul class="weui-uploader__files" id="uploaderFiles">

                            </ul>

                            <div class="weui-uploader__input-box">

                                <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple/>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</p>

<style>

.page__bd{

margin-bottom: 54px;

}

.shopcontant-right ul li.weui-uploader__file {

    float: left;

    margin: 10px 10px 10px 0 !important;

    width: 80px;

    height: 80px !important;

    background: no-repeat 50%;

    background-size: cover;

    position: relative;

}

.weui-gallery {

    display: none;

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    background-color: #000;

    z-index: 1000;

}

.weui-gallery__img {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 60px;

    left: 0;

    background: 50% no-repeat;

    background-size: contain;

}

.weui-uploader__bd{

padding-left: 20px;

}

.weui-uploader__input-box{

width: 100px;

height: 100px;

overflow: hidden;

background: url(../images/add-p.png) center no-repeat;//上传按钮图片

background-size: 100px;

}

.weui-uploader__input{

font-size: 24px;

width: 100px !important;

height: 100px !important;

opacity: 0;

}

.weui-gallery__opr {

    position: absolute;

    right: 0;

    bottom: 0;

    left: 0;

    background-color: #0d0d0d;

    color: #fff;

    line-height: 60px;

    text-align: center;

}

.weui-gallery__opr a{

width: 100% !important;

background: none !important;

max-width: 100%;

}

.weui-gallery__del {

    display: block;

}

.weui-gallery__del i{

    color: #fff;

    font-size: 22px;

}

</style>

<script type="text/javascript">

    $(function(){

        var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',

            $gallery = $("#gallery"), $galleryImg = $("#galleryImg"),

            $uploaderInput = $("#uploaderInput"),

            $uploaderFiles = $("#uploaderFiles")

            ;


        $uploaderInput.on("change", function(e){

            var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;

            for (var i = 0, len = files.length; i < len; ++i) {

                var file = files[i];


                if (url) {

                    src = url.createObjectURL(file);

                } else {

                    src = e.target.result;

                }


                $uploaderFiles.append($(tmpl.replace('#url#', src)));

            }

        });

        $uploaderFiles.on("click", "li", function(){

            $galleryImg.attr("style", this.getAttribute("style"));

            $gallery.fadeIn(100);

        });

        $gallery.on("click", function(){

            $gallery.fadeOut(100);

        });

        //删除图片地址

        $(".weui-gallery__del").on("click", function(){

            var $url1 = $(this).parent().parent().children("#galleryImg").css("background-image");

for(var $i = 0;$i<$("#uploaderFiles li").length;$i++){

if($("#uploaderFiles li").eq($i).css("background-image")==$url1){

$("#uploaderFiles li").eq($i).remove();

}

}

        });

    });

</script>