jquery单图与多图上传图片预览

抽时间自己写了个单图与多图上传并预览，代码简单，方便以后使用，上代码
js

        //上传图片
        $(".img-upload").on('change',function () {
            var element=$(this);
            var type=element.data('type');//1.单图上传，2.多图上传
            var filePath=element[0].files[0];
            var url=element.attr('url');
            var formdata = new FormData();
            formdata.append('file', filePath);
            layer.load();
            $.ajax({
                url:url,
                type:'post',
                data:formdata,
                contentType:false,
                processData:false,
                success:function (res){
                    layer.closeAll();
                    if(res.code>0){
                        if(type==1){
                            element.parent().next().val(res.data);
                            element.parent().nextAll('.img').prop('src',res.data);
                        }else{
                            var str='<div class="img-content">\n' +
                                ' <div class="img-bottom">\n' +
                                '<div class="del-shadow">\n' +
                                '<img src="/static/img/del-img.png" class="del" alt="删除">\n' +
                                '</div>\n' +
                                ' <input type="hidden" name="c_huanjing[]" value="'+res.data+'" id="c_huanjing">\n' +
                                ' <img class="img" src="'+res.data+'">\n' +
                                ' </div>\n' +
                                ' </div>';
                            element.parents('.imgs').prepend(str);
                        }
                    }else{
                        layer.msg(res.msg,{icon:5,time:1000});
                    }
                }
            })
        })
        //图片删除按钮隐藏与显示
        $("body").on('mouseenter','.del-shadow',function () {
            $(this).css('opacity','1');
        });
        $("body").on('mouseleave','.del-shadow',function () {
            $(this).css('opacity','0');
        });
        //删除图片
        $("body").on('click','.del',function () {
            $(this).parents('.img-content').remove();
        })

html(示例代码，具体样式可根据自己的需求修改)

<div class="img-content">
    <div class="img-bottom">
        <input type="file" class="img-upload" data-type='1' url="{:url('')}"/>
    </div>
    <input type="hidden" name="c_logo" id="c_logo">
    <img class="img" src="/static/img/add.png">
</div>

css

		.img-content{position: relative;display: inline-block;margin-right: 10px;}
        .img-bottom{
            width: 150px;
            height: 150px;
            border: 1px solid #ccc;
            border-radius: 10px;
        }
        .img{
            position: absolute;
            top: 0;
            height: 150px;
            width: 150px;
            border-radius: 10px;
        }
        .img-upload{
            position: absolute;
            z-index: 2;
            height: 150px;
            opacity: 0;
        }
        .del-shadow{
            height: 22px;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            z-index: 3;
            top: 0;
            width: 100%;
            border-top-left-radius:10px;
            border-top-right-radius:10px;
            text-align: right;
            opacity: 0;
        }
        .del-shadow>img{
            margin: 4px 8px 0 0;
            cursor:pointer;
        }

后代代码就根据tp5的文件上传来写就可以啦，如有错误，欢迎指正。over