jquery上传图片单图多图

主要用到的就是input里面的file,上传完成拿到文件流发给后端后端返回图片路径,让后前端展示出来。本篇文章包含单图上传和多图上传。最后有代码复制后更换上传接口,即可使用。

1.单图上传。

思路:拿到中间点击上传元素,点击后给父元素下面增加一个input标签,自触发点击事件并且监听input的上传如果上传成功,隐藏上传二维码元素再增加img元素。

2.多图上传。

思路:多图上传和单图上传方法都一样不过多了一点东西,那就是上传完之后要拿到的是个图片数组,所以我们要先var一个空数组,用来上传完毕后拿到上传的图片数组。每次上传成功都向数组里面push一个数据,删除就用splice这里也可以设置最大上传,用来做校验。

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>上传图片</title>
    <meta name="keywords" content="关键词" />
    <meta name="description" content="描述" />
    <link href="/static/css/css.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.SuperSlide.2.1.1.js"></script>
</head>
 <style>
.c_left2 .items {
    min-height: 45px;
    display: flex;
    margin-bottom: 24px;
    margin-top: 40px;
}
.c_left2 .items .left_text::before {
    content: '*';
    display: inline-block;
    margin: 5px;
    color: #FF9C00;
    font-size: 14px;
}
.c_left2 .items .right_text .nameflex {
    width: 320px;
    display: flex;
    justify-content: space-between;
}
.c_left2 .items .right_text .nameflex .nameitem .itimg {
    width: 144px;
    height: 98px;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
}

.c_left2 .items .right_text .nameflex .nameitem .itimgs1 {
    width: 130px;
    height: 130px;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
}

.c_left2 .items .right_text .nameflex .nameitem .itimgs1 .photo3 {
    width: 42px;
    height: 34px;
}

.c_left2 .items .right_text .nameflex .nameitem .itimgs1 .abimg {
    width: 120px;
    height: 120px;
}

.c_left2 .items .right_text .nameflex .nameitem .itimg .texts {
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #1296DB;
}

.c_left2 .items .right_text .nameflex .nameitem .itimg:hover .absimg {
    display: block;
    cursor: pointer;
}

.c_left2 .items .right_text .nameflex .nameitem .itimg .absimg {
    background-color: rgba(0, 0, 0, 0.7);
    width: 144px;
    height: 98px;
    position: absolute;
    color: #fff;
    text-align: center;
    line-height: 98px;
    display: none;
}

.c_left2 .items .right_text .nameflex .nameitem .texts {
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    margin-top: 10px;
    text-align: center;
}

.c_left2 .items .right_text .nameflex img {
    width: 126px;
    height: 85px;
}




.itemnum2 .left_text {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
}
 .itemnum2 .left_text::before {
    content: '*';
    display: inline-block;
    margin: 5px;
    color: #FF9C00;
    font-size: 14px;
}
 .itemnum2 .right_text {
    margin: 20px 18px 34px 80px;
    display: flex;
}

 .itemnum2 .right_text .uploadimg {
    width: 160px;
    height: 160px;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-right: 10px;
    border-radius: 4px;
}

.itemnum2 .right_text .uploadimg .upitem .imgs {
    width: 42px;
    height: 34px;
}

 .itemnum2 .right_text .uploadimg .upitem .texts {
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #1296DB;
    margin-top: 14px;
}

.itemnum2 .right_text .preimg {
    width: 160px;
    height: 160px;
    margin-right: 10px;
    position: relative;
    border-radius: 4px;
}

 .itemnum2 .right_text .abimg {
    width: 160px;
    height: 160px;
    margin-right: 10px;
    border-radius: 4px;
}

.itemnum2 .right_text .preimg:hover .abimgabs {
    display: block;
}

.itemnum2 .right_text .abimgabs {
    position: absolute;
    top: 0;
    width: 160px;
    height: 160px;
    background-color: rgba(0, 0, 0, 0.7);
    text-align: center;
    line-height: 160px;
    color: #fff;
    border-radius: 4px;
    display: none;
    cursor: pointer;
}

 </style>
<body>
    <div class="wrap">
        <div class="content">
                <div class="c_left2">
                    <form id="form">
                        <div class="items">
                            <div class="left_text">微信二维码:</div>
                            <div class="right_text">
                                <div class="nameflex">
                                    <div class="nameitem">
                                        <div class=" itimgs1" onclick="uploadimg()">
                                            <div class="imgre">
                                                <img class="photo3" src="/static/allimage/upload.png" alt="" srcset="">
                                                <div class="texts">上传二维码</div>
                                            </div>
                                        </div>
                                        <div class="texts">(请确保扫描此二维码能添加好友)</div>
                                        <input type="hidden" id="wechat_code" name="wechat_code" value="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="itemnum2">
                    <div class="left_text" id="shangc">上传作品:
                    <span style="color: red;">最少上传三张</span> </div>
                    <form id="imglist">
                        <div class="right_text">
                            <div class="uploadimg curPointer" onclick="uploadimgNum($(this))">
                                <div class="upitem">
                                    <div class="imgre">
                                        <img class="photo3" src="/static/allimage/upload.png" alt="" srcset="">
                                        <div class="texts">上传作品图片</div>
                                    </div>
                                    <input type="hidden" id="photo1" name="service_avatar1" value="">
                                </div>
                            </div>
                        </div>
                    </form>

                </div>
        </div>
    </div>
</body>
<script>
    function uploadimg() {
        var input = $('<input/>')
        input.prop('type', 'file')
        input.css('display', 'none')
        $('.right_text').append(input)
        input.click()
        input.on('change', function (event) {
            // 通过FileReader读取文件对象
            var formData = new FormData()
            // formData.append('fileKey', 'PPT/service')
            formData.append('file', event.target.files[0])
            $.ajax({
                method: 'POST',
                url: 'https://', //上传接口
                contentType: false,
                processData: false,
                data: formData,
                success: function (res) {
                    $('.imgre').hide()
                    $('.itimgs1').append(
                        '<img class="abimg"  src="' + res.path + '" alt="" srcset="">'
                    )
                    $('#wechat_code').val(res.path)
                }
            })
            // 完成选取文件后,从dom中自我删除
            input.remove()
        })
    }
</script>

<script>
    var uplistImg = [];
    var index = 0;
    function uploadimgNum(item) {
        if (uplistImg.length >= 3) {
            $('.uploadimg').hide()
        }
        var input = $('<input/>')
        input.prop('type', 'file')
        input.css('display', 'none')
        $('.right_text').append(input)
        input.click()
        input.on('change', function (event) {
            // 通过FileReader读取文件对象
            var formData = new FormData()
            // formData.append('fileKey', 'PPT/servicePPT') //上传携带参数
            formData.append('file', event.target.files[0])
            $.ajax({
                method: 'POST',
                url: 'https://', //上传接口
                contentType: false,
                processData: false,
                data: formData,
                success: function (res) {
                    $(".sp").remove();
                    index++
                    item.after(
                        '<div class="preimg cl' + index + '">' +
                        '    <img class="abimg"  src="' + res.path + '" alt="" srcset="">' +
                        ' <div class="abimgabs" onclick=deleteImg("cl' + index + '",' + index +
                        ')>删 除</div>' +
                        '</div> '
                    )
                    uplistImg.push(res.path)
                    if (uplistImg.length >= 3) {
                        $('.uploadimg').hide()
                    }
                }
            })
            // 完成选取文件后,从dom中自我删除
            input.remove()
        })
    }
    //点击删除
    function deleteImg(item, index) {
        $('.' + item).remove()
        uplistImg.splice(0, index);
        if (uplistImg.length >= 3) {
            $('.uploadimg').hide()
        } else {
            $('.uploadimg').show()
        }
    }
</script>
</html>