创建,删除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 创建,删除存储过程,参数传递,创建 ...
随机推荐
- wemall软件交易平台微信图文编辑器部分代码分享
wemall软件交易平台微信图文编辑器部分代码,可下载: controller.php <?php date_default_timezone_set("Asia/chongqing& ...
- 3522: [Poi2014]Hotel
3522: [Poi2014]Hotel Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 253 Solved: 117[Submit][Status ...
- MyFirstServlet学习笔记
MyFirstServlet学习笔记 项目文件的结构目录如下,ser包,下设Serv.java是一个servlet文件,Note只是做的笔记,webroot下有login.jsp,WEB-INF下有w ...
- Https握手协议以及证书认证
1. 什么是https Https = http + 加密 + 认证 https是对http的安全强化,在http的基础上引入了加密和认证过程.通过加密和认证构建一条安全的传输通道.所以https可以 ...
- 如何javascript获取css中的样式
obj.style.height只能获取行间样式,但是我们要怎么获取写在css文件中的样式呢? 首先我们要用一个新的方法currentStyle.这个方法由current和style两个单词组成意思是 ...
- 菜鸟Scrum敏捷实践系列(三)用户故事的组织---功能架构的规划
菜鸟Scrum敏捷实践系列索引 菜鸟Scrum敏捷实践系列(一)用户故事概念 菜鸟Scrum敏捷实践系列(二)用户故事验收 菜鸟Scrum敏捷实践系列(三)用户故事的组织---功能架构的规划 采用Sc ...
- 元素类型为 "package" 的内容必须匹配 "(result-types?,interceptors?,default-interceptor-ref?
该错误为struts.xml内配置文件节点顺序错误. package内的元素节点必须按照以下顺序排放: result-types interceptors defau ...
- 当git上文件大小写重命名的修改时(git大小写敏感/默认不敏感),如何提交
git默认是大小写不敏感!!! 加了感叹号是什么意思呢,意思就是这本身就是一个坑,本人使用的IDE是idea(网上说Eclipse可以避开问题),这个IDE本身就集成了git,但是如果要在termin ...
- NGUI 解决UILable 在空行起始位置加‘\n’
NGUI 解决UILable 默认在顶满第一行时,在起始位置如键入空格无效,其原因就是会加入换行符,使字符串,整体换行了 解决办法加入bool变量控制 1在 UILable代码中添加 [HideInI ...
- ArcEngine保存栅格数据至rastercatalog
将栅格数据(IRasterDataset)直接保存到数据库中很常见,但是保存到栅格目录下就比较少见,好不容易才找到,在这里记录一下. public void saveRasterDs2Catalog( ...