使用jquery实现多张图片的上传

川长思鸟来 2022-06-04 05:08 608阅读 0赞

最近做项目要用到上传多张图片的功能，自己用jquery写了一个图片上传，期间遇到一个麻烦，就是给后台传的时候总是会覆盖前面一张的图片，只能传过去一张图片，最后解决的办法就是创建一个空对象用来保存传入的图片，然后遍历图片，最后将图片push到这个空对象中，实现多张图片的上传，现在将代码展示出来，提供大家参考：

html代码：

<!DOCTYPE html>
    <html>
    <meta charset="utf-8">
    <title>申请加盟</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/franchiseeApplication.css">
    
    
    <body>
    <div class="essentialInformationBox">
    <div class="informationTitle">基本信息</div>
    <div class="inforName">
    <div class="lastName"><span class="symol">*</span>姓名：</div>
    <div class="inName"><input type="text" placeholder="请输入姓名" class="inputForName" /></div>
    </div>
    <div class="inforMobil">
    <div class="phoneNum"><span class="symol">*</span>电话：</div>
    <div class="inNum"><input type="tel" placeholder="请输入联系电话" class="inputForNum" maxlength="11" onkeyup="value=value.replace(/[^0-9.]/g,'') " /></div>
    </div>
    <div class="inforCompany">
    <div class="companys">公司名称：</div>
    <div class="firmName"><input type="text" placeholder="请输入公司名称" class="inputCompany" /></div>
    </div>
    </div>
    <div class="on_product">
    <div class="onProductTitle">产品信息</div>
    <div class="productBox">
    <div class="productName"><span class="symol">*</span>产品名称：</div>
    <div class="pros"><input type="text" placeholder="请输入产品名称" class="inputProductName" /></div>
    </div>
    <div class="proAttributesBox">
    <div class="attributesName">产品属性：</div>
    <div class="proAttributes"><input type="text" placeholder="请输入相关产品相关词汇" class="inputAttributes" /></div>
    </div>
    <div class="productDrawingBox">
    <div class="productDescription">产品配图<span class="remark">（1M以内，jpg，png格式）</span></div>
    <div class="productImg">
    <div id="uploadBox">
    
    </div>
    
    
    <div class="uploadDIv">
    <span>+</span><input type="file" name="file" multiple id="inputs" accept="image/*" class='fileTest' multiple="multiple" />
    </div>
    </div>
    </div>
    </div>
    <div class="confirmApply">确定申请</div>
    </body>
    
    
    </html>

css代码如下：

html,
    body {
    background: #edf0f2;
    }
    
    
    img {
    width: 100%;
    display: block;
    border: none;
    vertical-align: bottom;
    border: none;
    }
    
    
    input[type="button"] {
    -webkit-appearance: none;
    }
    
    
    
    
    /*----------------内容开始-------------*/
    
    
    
    
    /*------------基本信息------------*/
    
    
    .essentialInformationBox {
    width: 93.6%;
    margin: 0 auto;
    background-color: #fcfcfc;
    margin-top: 12px;
    }
    
    
    .informationTitle {
    height: 50px;
    color: #333333;
    font-size: 16px;
    line-height: 50px;
    padding-left: 11px;
    border-bottom: solid 1px #e5e5e5;
    }
    
    
    .inforName,
    .inforMobil {
    height: 50px;
    color: #333333;
    font-size: 16px;
    line-height: 50px;
    padding-left: 11px;
    border-bottom: solid 1px #e5e5e5;
    }
    
    
    .inforCompany {
    height: 50px;
    color: #333333;
    font-size: 16px;
    line-height: 50px;
    padding-left: 11px;
    border-bottom: solid 1px #e5e5e5;
    }
    
    
    .symol {
    color: #fb0000;
    }
    
    
    .lastName,
    .phoneNum,
    .companys {
    float: left;
    }
    
    
    .inName,
    .inNum,
    .firmName {
    float: left;
    }
    
    
    .inputForName,
    .inputForNum,
    .inputCompany {
    height: 45px;
    line-height: 45px;
    border: none;
    outline: none;
    padding-left: 5px;
    font-size: 16px;
    width: 100%;
    /* min-width: 200px;*/
    }
    
    
    
    
    /*-----------产品信息----*/
    
    
    .on_product {
    width: 93.6%;
    margin: 0 auto;
    background-color: #fcfcfc;
    margin-top: 12px;
    }
    
    
    .onProductTitle {
    height: 50px;
    color: #333333;
    font-size: 16px;
    line-height: 50px;
    padding-left: 11px;
    border-bottom: solid 1px #e5e5e5;
    }
    
    
    .productBox,
    .proAttributesBox {
    height: 50px;
    color: #333333;
    font-size: 16px;
    line-height: 50px;
    padding-left: 11px;
    border-bottom: solid 1px #e5e5e5;
    }
    
    
    .productName,
    .attributesName {
    float: left;
    }
    
    
    .pros,
    .proAttributes {
    float: left;
    }
    
    
    .inputProductName,
    .inputAttributes {
    height: 45px;
    line-height: 45px;
    border: none;
    outline: none;
    padding-left: 5px;
    font-size: 16px;
    width: 100%;
    }
    
    
    
    
    /*-------------上传图片--------------*/
    
    
    .productDrawingBox {
    background-color: #fcfcfc;
    color: #333333;
    font-size: 16px;
    padding-left: 11px;
    border-bottom: solid 1px #e5e5e5;
    }
    
    
    .productDescription {
    height: 44px;
    line-height: 44px;
    }
    
    
    .remark {
    color: #999999;
    }
    
    
    .productImg {
    height: 96px;
    overflow: hidden;
    }
    
    
    .divImg {
    width: 78px;
    height: 81px;
    background-color: #edf0f2;
    /*margin-left: 22px;*/
    margin-right: 11px;
    float: left;
    margin-bottom: 15px;
    }
    
    
    .imgBiMG{
    width: 78px;
    height: 81px;
    float: left;
    display: block;
    }
    
    
    .uploadDIv {
    width: 78px;
    height: 81px;
    background-color: #edf0f2;
    font-size: 28px;
    color: #bfbfbf;
    text-align: center;
    line-height: 81px;
    float: left;
    position: relative;
    }
    
    
    .uploadDIv input {
    width: 78px;
    height: 78px;
    opacity: 0;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 4;
    padding: 0;
    
    }
    
    
    .confirmApply {
    height: 43px;
    width: 78%;
    text-align: center;
    margin: 0 auto;
    background: -webkit-linear-gradient(left, #ef833b, #f04d6a);
    background: -o-linear-gradient(right, #ef833b, #f04d6a);
    background: -moz-linear-gradient(right, #ef833b, #f04d6a);
    background: linear-gradient(to right, #ef833b, #f04d6a);
    color: #fff;
    line-height: 43px;
    border-radius: 21px;
    margin-top: 37px;
    margin-bottom: 37px;
    }

js代码如下：