需求说明:

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的更多相关文章

  1. 二叉排序树(BST)创建,删除,查找操作

    binary search tree,中文翻译为二叉搜索树.二叉查找树或者二叉排序树.简称为BST 一:二叉搜索树的定义 他的定义与树的定义是类似的,也是一个递归的定义: 1.要么是一棵空树 2.如果 ...

  2. 在后台对GameObject进行"创建"||"删除"动作

    在后台对GameObject进行"创建"||"删除"动作 建立 public GameObject Pre;//在编辑器中用来绑定的Prefabs public ...

  3. jQuery删除DOM节点

    jQuery删除DOM节点 <%@ page language="java" import="java.util.*" pageEncoding=&quo ...

  4. angular.js ng-repeat动态插入删除dom节点

    既然上面提到 angular.js 下无需用户直接操作dom ,而是在编译间断 dom 与 控制层model 实现了双向绑定,一方做出改变,另一方就会立即改变,那问题来了,我想插入一个文本框和按钮,并 ...

  5. angular.js 动态插入删除dom节点

    angular.js 是新一代web开发框架,它轻松在web前端实现了MVC模式,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作dom . 作为前端开发而不去操作dom ,这简直是一个 ...

  6. hive 学习系列二(数据库的创建删除修改) 拿走,不谢。

    database 相当于一个目录或者命名空间,用来更好地进行表的管理 在hdfs 的目录位置大致如下: [root@iZbp12vtv76y9q3d633bh6Z /]# hadoop fs -ls ...

  7. Oracle 删除用户和表空间////Oracle创建删除用户、角色、表空间、导入导出、...命令总结/////Oracle数据库创建表空间及为用户指定表空间

    Oracle 使用时间长了, 新增了许多user 和tablespace. 需要清理一下 对于单个user和tablespace 来说, 可以使用如下命令来完成. 步骤一:  删除user drop ...

  8. 2016/1/27 1, File 创建 删除 改名 换路径 2,输出流 不覆盖 换行输入 3,输入流

    1, File  创建  删除  改名  换路径 package Stream; import java.io.File; import java.io.IOException; public cla ...

  9. MongoDB 表(集合) 创建删除、数据增删改查

    MongoDB 表(集合) 创建删除和增删改查数据 创建一个集合(emp) 在创建集合之前先使用use xxx,选择数据库,如果没有会创建(并不是真正的创建,只有在数据库里面保存集合数据之后才能够真正 ...

  10. oracle 存储过程详细介绍(创建,删除存储过程,参数传递等)

    这篇文章主要介绍了oracle 创建,删除存储过程,参数传递,创建,删除存储函数,存储过程和函数的查看,包,系统包等相关资料,需要的朋友可以参考下   oracle 创建,删除存储过程,参数传递,创建 ...

随机推荐

  1. background-image 与 img 动画性能对比

    开发H5常常会用到滑屏,目前大部分滑屏插件都是通过控制页面的transform属性来实现.尽管如此,我总是发现自己的H5滑动起来就是不如网上一些优秀案例流畅,表现为滑动动画会出现卡顿.跳帧. 后来我发 ...

  2. 使用mysql_Front链接mysql,出现警告access denied for user ''@'localhost'

    刚刚安装好的mysql5.7,想来使用工具方便一下,却一直有报这个错误: 最后找出原因:我给root用户设置的密码神不知鬼不觉的消失了,无奈, 解决办法一: cmd->mysql -h loca ...

  3. El表达式的用法个人总结

    EL表达式的好处: 通过EL可以简化在JSP开发中对对象的引用,从而规范页面代码,增加程序的可读性及可维护性. EL表达式的几个特点:  1:可以与jsp标签库结合使用,也可以与javascript语 ...

  4. C++11右值引用和std::move语句实例解析

    关键字:C++11,右值引用,rvalue,std::move,VS 2015 OS:Windows 10 右值引用(及其支持的Move语意和完美转发)是C++0x将要加入的最重大语言特性之一.从实践 ...

  5. CoreCLR源码探索(四) GC内存收集器的内部实现 分析篇

    在这篇中我将讲述GC Collector内部的实现, 这是CoreCLR中除了JIT以外最复杂部分,下面一些概念目前尚未有公开的文档和书籍讲到. 为了分析这部分我花了一个多月的时间,期间也多次向Cor ...

  6. Liniux系统下目录的权限意义

    访问者及其基本权限 Linux系统内的文件访问者有三种身份,分别是: a) 文件和文件目录的所有者: u---User(所有权);b) 文件和文件目录的所有者所在的组的用户: g---Group;c) ...

  7. Android Doze模式启用和恢复

    从Android 6.0(API level 23)开始,Android提出了两个延长电池使用时间的省电特性给用户.用户管理可以在没有充电的情况下管理app的行为.当用户一段时间没有使用手机的时候,D ...

  8. 如何在IntelJ下用Maven创建一个Web项目

    相信一开始做Web项目的同学都是直接把项目包放在WEB-INF/lib目录下,然后就开始做项目了.但是之后接触了一些使用了Maven进行包管理的项目,我们就不得不学一学如何用Maven做包管理. 在网 ...

  9. 4日6日--ES5新增数组方法

    forEach使用的函数调用,所以占内存比较大,不如定长for循环和迭代for循环 1.通过forEach将数组中的元素逐个表示出来(遍历方法,读取操作). 2.通过map将原数组中的元素进行算数运算 ...

  10. 如何使用CocoaPods

    如何使用CocoaPods 1.进入主目录下 cd /Users/HYYT/Desktop/支付功能/微信支付宝集成/支付宝微信支付集成 2.建立Podfile(配置文件) 2.1  输入:vim P ...