需求说明:
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);
以上仅为个人拙见,如有不正确的地方,欢迎指正。^_^