创建，删除DOM

需求说明：

1、上传图片，有删除功能，可上传5张，至少上传一张

 

html代码如下

<div class="imgUpBox">
    <div class="imgboxCon show">
       <div class="imgShowBox" datatype="upImg" errormsg="图片格式错误" nullmsg="图片不能为空">
          <img id="img1" src="" />
       </div>
       <div class="imgOprateBox">
            <input type="file" class="imgInput" name="file_1" id="file1" onchange="up(this)"/>
            <a class="imgUpBtn"></a>
            <a class="imgDelBtn">删除</a>
       </div>
    </div>
</div>

 

jQuery 代码如下

imgDOM(5);
//新增上传DOM
function imgDOM(max){
   var upID = 1;
   var upNum = 1;//name是从1开始计数的,upNum的值赋给name，等价于length
    
   /*图片上传*/
   $(".imgUpBox").on("click",".imgUpBtn",function(){
      $(this).prev(".imgInput").click();
   });
   
   /*显示删除按钮,并创建下一个上传DOM*/
   $(".imgUpBox").on("change",".imgInput",function(){//上传图片的逻辑是：上传失败依然会执行change事件   
       var _img = $(this).parents(".imgboxCon").find("img").attr("src");
       if(_img != ""){//图片上传成功
         upID = upID + 1;
         $(this).next().hide().next().show();
         $(this).parents(".imgboxCon").find(".imgShowBox").removeClass("Validform_error");            
         if($(".imgUpBox .imgboxCon").length < max){  
             upNum = upNum + 1;  //数量最大为max         
             creatDom();            
             return upNum;
         }      
       } 
       return upID;    
   });
     
   /*删除图片*/
   $(".imgUpBox").on("click",".imgDelBtn",function(){
       var _this = $(this),
           obj = _this.parents(".imgboxCon"),
           index = obj.index(),
           len = $(".imgUpBox .imgboxCon").length-1,
           lastImg = $.trim($(".imgboxCon").eq(len).find("img").attr("src"));
                
       if(index==len){//假设删除的是最后一张,后面的代码无需执行，跳出操作
           obj.remove();
           creatDom();
           return upNum;
       }else{//如果不是最后一张，直接移除DOM                     
           if(lastImg != ""){//如果最后一张已上传，移除DOM后，在末尾创建一个新DOM
               obj.remove();                      
               creatDom();
           }else{
               obj.remove();
               upNum = upNum-1;
           }                  
       }
        
       for(var i=0;i<=len;i++){//name重置，ignore重置
           var num = i+1;
           var name = "file_" + num;
           $(".imgboxCon").eq(i).find(".imgInput").attr("name",name);
           $(".imgboxCon").eq(i).find(".imgShowBox").attr("ignore","ignore"); 
       }
       $(".imgboxCon").eq(0).find(".imgShowBox").removeAttr("ignore");
       return upNum;
 
   });
    
   //创建图片上传Dom
   function creatDom(){
       var _html =  '<div class="imgboxCon show">'
                   +'    <div class="imgShowBox" ignore="ignore" datatype="upImg" errormsg="图片格式错误" nullmsg="图片不能为空">'
                   +'      <img id="img'+ upID +'" src="" />'
                   +'    </div>'
                   +'    <div class="imgOprateBox">'
                   +'      <input type="file" class="imgInput" name="file_'+ upNum +'" id="file'+ upID +'" οnchange="up(this)">'
                   +'      <a class="imgUpBtn"></a>'
                   +'      <a class="imgDelBtn">删除</a>'
                   +'    </div>'
                   +' </div>'
       $(".imgUpBox").append(_html);
   }
}

只需要在方法调用的时候，填写图片可上传的最大张数即可，以防需求变更：

如：上传1张——imgDOM(1);

       上传5张——imgDOM(5);

       上传10张——imgDOM(10);

 

以上仅为个人拙见，如有不正确的地方，欢迎指正。^_^

 

转载于:https://www.cnblogs.com/windy1990/p/6772525.html