在图片上加入删除按钮

在Web开发中，有时候我们会遭遇这样的场景，我们给用户提供了批量上传的便捷功能，但是不可避免地是用户可能会选错图片，当一批图片已经上传并成列出来时，用户想删除图片却不知点哪里，也许用户会刷新让其眼不见为净，但可能导致用户之前的操作都统统白费。

我认为较好的方法是在用户上传完图片时为每一张图片加上删除按钮，这个问题用CSS的层叠加就可以解决了。

下面，我提供一张图片的四个角落的删除按钮显示方式。

首先提供两张样例图片：

然后看看我们最终的显示效果（如果显示位置不太准确，可能是和博客园的CSS冲突）

html,css代码很简单，主要三样东西：z-index, position和margin

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#image_list {list-style:none;
}
#image_list li {float: left;width: 60px;height: 60px;padding: 3px 5px 0 5px;
}
.demo-image {width:60px;height:60px;
}
.demo-image-top-left {position:relative;z-index:2;margin-top:-60px;color:#f00;background: #eeeeee;width:16px;height:16px;
}
.demo-image-top-right {position:relative;z-index:2;margin-top:-60px;margin-left: 44px;color:#f00;background: #eeeeee;width:16px;height:16px;
}
.demo-image-bottom-left {position:relative;z-index:2;margin-top:-16px;color:#f00;background: #eeeeee;width:16px;height:16px;
}
.demo-image-bottom-right {position:relative;z-index:2;margin-top:-16px;margin-left: 44px;color:#f00;background: #eeeeee;width:16px;height:16px;
}
</style>
</head>
<body>
<ul id="image_list"><!--上左--><li><div> <img class= "demo-image" src= "http://203.169.239.169/images/Desert.jpg" alt= "要被覆盖的片 " title= "要被覆盖的片 " /> </div><div class= "demo-image-top-left"><a href="" title="删除图片"><img src="http://203.169.239.169/images/cancel.png" /></a></div></li><!--上右--><li><div> <img class= "demo-image" src= "http://203.169.239.169/images/Desert.jpg" alt= "要被覆盖的片 " title= "要被覆盖的片 " /> </div><div class= "demo-image-top-right"><a href="" title="删除图片"><img src="http://203.169.239.169/images/cancel.png" /></a></div></li><!--下左--><li><div> <img class= "demo-image" src= "http://203.169.239.169/images/Desert.jpg" alt= "要被覆盖的片 " title= "要被覆盖的片 " /> </div><div class= "demo-image-bottom-left"><a href="" title="删除图片"><img src="http://203.169.239.169/images/cancel.png" /></a></div></li><!--下右--><li><div> <img class= "demo-image" src= "http://203.169.239.169/images/Desert.jpg" alt= "要被覆盖的片 " title= "要被覆盖的片 " /> </div><div class= "demo-image-bottom-right"><a href="" title="删除图片"><img src="http://203.169.239.169/images/cancel.png" /></a></div></li>
</ul>
</body>
</html>

在图片上加入删除按钮相关推荐

vue+elemnt ul 图片上传隐藏按钮+图片回显
技术栈: vue2.6 +element 需求:在弹窗中实现图片上传,上传之后隐藏上传按钮,实现放大和删除功能,修改时回显图片. 具体实现效果如图所示: 1.隐藏上传按钮在el-upload中绑定一 ...
Vue图片上传删除预览操作
样式是通过element-ui实现的,使用的时候要先导入所需组件 html  <!-- on-prev ...
uniapp 图片上传删除
uniapp我的示例:如下点击加号图片:选择上传类型:图片或者文件上传的图片可以删除这是界面上的一系列操作,接下来我们来看如何代码实现吧一.界面代码:展示图片 <view class=& ...
输入框添加keydown后，键盘上的删除按钮失效
这个问题看着好像很要命但只要你找到原因就很简单了很多时候我们会想给输入框添加回车触发搜索事件既 $("#searchInput").on("keydown" ...
图片上传删除图片后再次上传同一个图片不成功
问题描述: 上传图片后,删除该图片,再次上传该图片,无法进行上传 <input #fileupload multiple type="file" (change)=" ...
在图片上加播放按钮示例代码
重点:大家都知道relative是相对定位,absolute是绝对定位,他们的单一用法我们非常熟悉,但是,怎样让某个元素在他的父级块中决对定位呢,答案就是relative+absolute.absol ...
bootstrap-fileinput的简单使用(图片上传和编辑)
简介: 一款非常优秀的HTML5文件上传插件,支持bootstrap 3.x 和4.x版本,具有非常多的特性:多文件选择.这个插件能最简单的帮你完成文件上传功能,且使用bootstrap样式.还支持多 ...
uniapp、uview——图片上传（单图上传、多图上传、多组照片上传、图片回显）
一.简介 uView组件的上传功能,单图上传.多图上传等. 官方文档地址: https://www.uviewui.com/components/upload.html 二.步骤 (一)单图上传 1. ...
elementui图片上传php,vue+element-ui+富文本————图片上传
最近用vue+element-ui开发一套后台管理系统,其中项目中需要用到富文本编辑器,这里总结下开发过程中遇到的坑和使用方法. 刚开始用的是vue-quill-editor结合element-ui上 ...
vue+element-ui+富文本————图片上传
最近用vue+element-ui开发一套后台管理系统,其中项目中需要用到富文本编辑器,这里总结下开发过程中遇到的坑和使用方法. 刚开始用的是vue-quill-editor结合element-ui上 ...

在图片上加入删除按钮

在图片上加入删除按钮相关推荐

最新文章

热门文章