传图的源码分享

前端源码：

 <div class="picbox">
         
         <div class="uploadimg">
              <div id="imgbox" ></div><div style="display:none;" id="initnum">0</div>
              <img class="upload_img" data-id="1" src="/media/img/default/load_img.png">    
              <img style="display:none;" class="upload_img" data-id="2" src="/media/img/default/load_img.png"> 
              <img style="display:none;" class="upload_img" data-id="3" src="/media/img/default/load_img.png"> 
              <img style="display:none;" class="upload_img" data-id="4" src="/media/img/default/load_img.png"> 
              <img style="display:none;" class="upload_img" data-id="5" src="/media/img/default/load_img.png"> 
              <img style="display:none;" class="upload_img" data-id="6" src="/media/img/default/load_img.png"> 
         </div>
         <div style="display: none;width: 100%;height: 100vh;position: relative;">
              <div style="" id="inputbox" >
                <input type="file" name="image1" data-id="1" title="请选择图片" id="file1" accept="image/png,image/jpg,image/gif,image/JPEG">
                <input type="file" name="image2" data-id="2" title="请选择图片" id="file2" accept="image/png,image/jpg,image/gif,image/JPEG">
                <input type="file" name="image3" data-id="3" title="请选择图片" id="file3" accept="image/png,image/jpg,image/gif,image/JPEG">
                <input type="file" name="image4" data-id="4" title="请选择图片" id="file4" accept="image/png,image/jpg,image/gif,image/JPEG">
                <input type="file" name="image5" data-id="5" title="请选择图片" id="file5" accept="image/png,image/jpg,image/gif,image/JPEG">
                <input type="file" name="image6" data-id="6" title="请选择图片" id="file6" accept="image/png,image/jpg,image/gif,image/JPEG">
               
                        点击选择图片
              </div>
         </div>
      </div>

对应的js源码：

//传图

var imgNum=$("#initnum").html();
$(".uploadimg .upload_img").bind("click",function(ev){
    var index=ev.currentTarget.dataset.id;
    var that=this;
    if(index==1){
        $("#file1").click();
        $("#file1").unbind().change(function(e){
            var index=e.currentTarget.dataset.id;
            if($('#file').val()==''){
                return false;
            }
            $(that).hide();
            var filePath=$(this).val();
            changeImg(e,filePath,index);
            imgNum++;
            if(imgNum<6){
                $(".upload_img").eq(1).show();
            }
        })
    }else if(index==2){
        $("#file2").click();
        $("#file2").unbind().change(function(e){
            var index=e.currentTarget.dataset.id;
            if($('#file').val()==''){
                return false;
            }
            $(that).hide();
            var filePath=$(this).val();
            changeImg(e,filePath,index);
            imgNum++;
            if(imgNum<6){
                $(".upload_img").eq(2).show();
            }
        })
        
    }else if(index==3){
        $("#file3").click();
        $("#file3").unbind().change(function(e){
            var index=e.currentTarget.dataset.id;
            if($('#file').val()==''){
                return false;
            }
            var filePath=$(this).val();
            changeImg(e,filePath,index);
            $(that).hide();
            imgNum++;
            if(imgNum<6){
                $(".upload_img").eq(3).show();
            }
        })
    }else if(index==4){
        $("#file4").click();
        $("#file4").unbind().change(function(e){
            var index=e.currentTarget.dataset.id;
            if($("#file").val()==""){
                return false;
            }
            var filePath=$(this).val();
            changeImg(e,filePath,index);
            $(that).hide();
            imgNum++;
            if(imgNum<6){
                $(".upload_img").eq(4).show();
            }
        })
    }else if(index==5){
        $("#file5").click();
        $("#file5").unbind().change(function(e){
            var index=e.currentTarget.dataset.id;
            if($("#file").val()==""){
                return false;
            }
            var filePath=$(this).val();
            changeImg(e,filePath,index);
            $(that).hide();
            imgNum++;
            if(imgNum<6){
                $(".upload_img").eq(5).show();
            }
        })
    }else if(index==6){
        $("#file6").click();
        $("#file6").unbind().change(function(e){
            var index=e.currentTarget.dataset.id;
            if($("#file").val()==""){
                return false;
            }
            var filePath=$(this).val();
            changeImg(e,filePath,index);
            $(that).hide();
            imgNum++;
            
        })
    }
    
})

//更换图片
function changeImg(e,filePath,index){
    fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
    if(!fileFormat.match(/.png|.jpg|.jepg/)){
        showError("文件格式错误！");
        return ;
    }
    //获取并记录图片的base64编码
    var reader=new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onloadend=function(){
        //图片转成src属性值
        var dataURL=reader.result;
        //显示图片
        $("#imgbox").html($("#imgbox").html() + '<div class="imgcontain" data-index=' + index + '><img  class="imgcontain" src=' + dataURL + ' ><img οnclick="removeImg(this,' + index + ')"  class="imgDelete" src="../media/img/default/close.png" /></div>');
    };
}

//删除图片
function removeImg(obj, index) {
    for(var i = 0; i < $(".imgcontain").length; i++) {
        if($(".imgcontain").eq(i).attr("data-index") == index) {
            $(".imgcontain").eq(i).remove();
        }
    }
    for(var i = 0; i < $(".upload_img").length; i++) {
        $(".upload_img").eq(i).hide();
        if($(".upload_img").eq(i).attr("data-id") == index) {
            console.log($(".upload_img").eq(i).attr("data-id"))
            $(".upload_img").eq(i).show();
        }
    }
    imgNum--;
}

分析：

点击上传file为图片，隐藏原来的添加按钮，显示图片，添加按钮右移，以此类推，达到多少张图就隐藏添加按钮