创建,删除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的更多相关文章
- 二叉排序树(BST)创建,删除,查找操作
binary search tree,中文翻译为二叉搜索树.二叉查找树或者二叉排序树.简称为BST 一:二叉搜索树的定义 他的定义与树的定义是类似的,也是一个递归的定义: 1.要么是一棵空树 2.如果 ...
- 在后台对GameObject进行"创建"||"删除"动作
在后台对GameObject进行"创建"||"删除"动作 建立 public GameObject Pre;//在编辑器中用来绑定的Prefabs public ...
- jQuery删除DOM节点
jQuery删除DOM节点 <%@ page language="java" import="java.util.*" pageEncoding=&quo ...
- angular.js ng-repeat动态插入删除dom节点
既然上面提到 angular.js 下无需用户直接操作dom ,而是在编译间断 dom 与 控制层model 实现了双向绑定,一方做出改变,另一方就会立即改变,那问题来了,我想插入一个文本框和按钮,并 ...
- angular.js 动态插入删除dom节点
angular.js 是新一代web开发框架,它轻松在web前端实现了MVC模式,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作dom . 作为前端开发而不去操作dom ,这简直是一个 ...
- hive 学习系列二(数据库的创建删除修改) 拿走,不谢。
database 相当于一个目录或者命名空间,用来更好地进行表的管理 在hdfs 的目录位置大致如下: [root@iZbp12vtv76y9q3d633bh6Z /]# hadoop fs -ls ...
- Oracle 删除用户和表空间////Oracle创建删除用户、角色、表空间、导入导出、...命令总结/////Oracle数据库创建表空间及为用户指定表空间
Oracle 使用时间长了, 新增了许多user 和tablespace. 需要清理一下 对于单个user和tablespace 来说, 可以使用如下命令来完成. 步骤一: 删除user drop ...
- 2016/1/27 1, File 创建 删除 改名 换路径 2,输出流 不覆盖 换行输入 3,输入流
1, File 创建 删除 改名 换路径 package Stream; import java.io.File; import java.io.IOException; public cla ...
- MongoDB 表(集合) 创建删除、数据增删改查
MongoDB 表(集合) 创建删除和增删改查数据 创建一个集合(emp) 在创建集合之前先使用use xxx,选择数据库,如果没有会创建(并不是真正的创建,只有在数据库里面保存集合数据之后才能够真正 ...
- oracle 存储过程详细介绍(创建,删除存储过程,参数传递等)
这篇文章主要介绍了oracle 创建,删除存储过程,参数传递,创建,删除存储函数,存储过程和函数的查看,包,系统包等相关资料,需要的朋友可以参考下 oracle 创建,删除存储过程,参数传递,创建 ...
随机推荐
- background-image 与 img 动画性能对比
开发H5常常会用到滑屏,目前大部分滑屏插件都是通过控制页面的transform属性来实现.尽管如此,我总是发现自己的H5滑动起来就是不如网上一些优秀案例流畅,表现为滑动动画会出现卡顿.跳帧. 后来我发 ...
- 使用mysql_Front链接mysql,出现警告access denied for user ''@'localhost'
刚刚安装好的mysql5.7,想来使用工具方便一下,却一直有报这个错误: 最后找出原因:我给root用户设置的密码神不知鬼不觉的消失了,无奈, 解决办法一: cmd->mysql -h loca ...
- El表达式的用法个人总结
EL表达式的好处: 通过EL可以简化在JSP开发中对对象的引用,从而规范页面代码,增加程序的可读性及可维护性. EL表达式的几个特点: 1:可以与jsp标签库结合使用,也可以与javascript语 ...
- C++11右值引用和std::move语句实例解析
关键字:C++11,右值引用,rvalue,std::move,VS 2015 OS:Windows 10 右值引用(及其支持的Move语意和完美转发)是C++0x将要加入的最重大语言特性之一.从实践 ...
- CoreCLR源码探索(四) GC内存收集器的内部实现 分析篇
在这篇中我将讲述GC Collector内部的实现, 这是CoreCLR中除了JIT以外最复杂部分,下面一些概念目前尚未有公开的文档和书籍讲到. 为了分析这部分我花了一个多月的时间,期间也多次向Cor ...
- Liniux系统下目录的权限意义
访问者及其基本权限 Linux系统内的文件访问者有三种身份,分别是: a) 文件和文件目录的所有者: u---User(所有权);b) 文件和文件目录的所有者所在的组的用户: g---Group;c) ...
- Android Doze模式启用和恢复
从Android 6.0(API level 23)开始,Android提出了两个延长电池使用时间的省电特性给用户.用户管理可以在没有充电的情况下管理app的行为.当用户一段时间没有使用手机的时候,D ...
- 如何在IntelJ下用Maven创建一个Web项目
相信一开始做Web项目的同学都是直接把项目包放在WEB-INF/lib目录下,然后就开始做项目了.但是之后接触了一些使用了Maven进行包管理的项目,我们就不得不学一学如何用Maven做包管理. 在网 ...
- 4日6日--ES5新增数组方法
forEach使用的函数调用,所以占内存比较大,不如定长for循环和迭代for循环 1.通过forEach将数组中的元素逐个表示出来(遍历方法,读取操作). 2.通过map将原数组中的元素进行算数运算 ...
- 如何使用CocoaPods
如何使用CocoaPods 1.进入主目录下 cd /Users/HYYT/Desktop/支付功能/微信支付宝集成/支付宝微信支付集成 2.建立Podfile(配置文件) 2.1 输入:vim P ...