创建，删除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 +'" onchange="up(this)">'

                   +'      <a class="imgUpBtn"></a>'

                   +'      <a class="imgDelBtn">删除</a>'

                   +'    </div>'

                   +' </div>'

       $(".imgUpBox").append(_html);

   }

}

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

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

上传5张——imgDOM(5);

上传10张——imgDOM(10);

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

秒客网

创建，删除DOM

相关文章