jquery图片上传

jquery图片上传

​ (第一次写 大神勿喷)

1. html代码

<div class="upl_bar pull-left">
    <label class="upl_img_btn">
    <div class="preview preview_bg img" id="images"</div>
    <input type="file" class="img_bg_file">
    <i class="ion-plus"></i>
    <div>点击上传图片</div>
    </label>
</div>

2.css代码

label.upl_img_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100px;
    height: 100px;
    font-size: 30px;
    text-align: center;
    color: #ccc;
    background-color: #fff;
    border: 1px dashed #ccc;
    cursor: pointer;
}
.upl_bar.finished label.upl_img_btn {
    display: none;
}
label.upl_img_btn input[type=file] {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 0;
    height: 0;
    border: 0;
    opacity: 0;
}
.upl_bar .preview {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #333;
    background-color: #fff;
    background-size: contain;
    background-repeat: no-repeat;
}
.upl_bar.finished .preview {
    display: block;
}
.upl_bar.finished .preview img {
    max-width: 100%;
}
.upl_bar .preview .delete {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
}
.upl_bar .preview .delete:hover {
    text-decoration: underline;
}
/*.upl_bar.finished .preview_bg {
    color: rgba(255,0,0,.6);
    border: 1px solid;
}
.section.uneditable .upl_bar.finished .preview_bg {
    border: 1px solid #ddd;
}*/
.section.uneditable .upl_bar.finished .preview_bg i {
    display: none;
}
.upl_bar.finished .preview_bg i:before {
    /*font-size: 21px;*/
}
.upl_bar .preview_bg.default {
    display: block;
    background-image: url(../imgs/img-default.png);
    background-size: contain;
    border: 1px solid #ddd;
}

.upl_bar {
    margin: 0 20px 20px 0;
    width: 100px;
}
.upl_bar p {
    height: 60px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.front_desk.app_front_desk .floor_section .area .banner_list .see_image {
    display: inline-block;
    margin-top: 50px;
    color: #036eb7;
}
.front_desk.app_front_desk .floor_section .area .banner_list .see_image:hover {
    text-decoration: underline;
}
.upl_bar .preview {
    width: 100px;
    height: 100px;
}
.upl_bar {
    margin: 0 40px 0 0;
    width: 210px;
}
.upl_bar .upl_img_btn {
    display: block;
    padding-top: 35px;
    width: 210px;
    height: 140px;
    color: #999;
    background-color: #f3f3f3;
}
.upl_bar .upl_img_btn div {
    font-size: 14px;
}
.upl_bar .preview {
    width: 210px;
    height: 140px;
    background-color: #f3f3f3;
}

3.jquery代码

$(".img_bg_file").change(function(e){
    var obj = $(this);
    var parents = obj.parents(".upl_bar");
    // var preview = obj.parents(".upl_bar").find(".preview");
    var file1 = $('.img_bg_file').val();
    var extStart = file1.lastIndexOf('.'),
    ext = file1.substring(extStart,file1.length).toUpperCase();
    //判断图片格式
    if(ext !== '.PNG' && ext !== '.JPG' && ext !== '.JPEG' && ext !== '.GIF'){
        Win.error('请上传正确格式的图片');
        resetFile();
        return false;
    }
    var size = this.files[0].size / 1024;
    if (size > 5120) {
        Win.error("图片上传不能大于5M");
        resetFile();
        return false;
    }
    if (obj[0].files) {
        //图片上传服务器(这里可以换成自己的代码)
        var formData = new FormData();
        formData.append("file", obj[0].files[0]);
        $.ajax({
            url: "/app/upload",
            type: "post",
            data: formData ,
            contentType:false,
            processData:false,
            async: false,
            success: function (data) {
                console.log(data);
                if (data.resultCode == "200") {
                    //文件服务器路径
                    filePath = window.location.protocol + '//' + window.location.host +                       data.resultValue.filePath;
                }else {
                    Win.error(data.resultMsg)
                }
            },
            error: function (err) {
                alert(err);
            }
        });
        // Firefox下取得的是图片的数据;
        var objectURL = window[window.URL ? 'URL' : 'webkitURL']['createObjectURL'](obj[0].files[0]);
        if(!objectURL) {
            return;
        }
        parents.find('.preview_bg').show().css({'background-image': 'url(' + objectURL + ')'});
        window[window.URL ? 'URL' : 'webkitURL']['revokeObjectURL'](obj[0].files[0]);
    }
    obj.val("");
     //还原
    function resetFile(){
        //去除图片
        $('#images').hide();
    }
});

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KwuKMcUi-1574241064640)(C:\Users\admin\Pictures\Camera Roll\1574240489(1)].jpg)

jectURL’](obj[0].files[0]);
}
obj.val("");
//还原
function resetFile(){
//隐藏图片
$(’#images’).hide();
}
});

![显示效果应该是这样的](https://img-blog.csdnimg.cn/20191120171138823.jpg)