图片选择并使用base64展示
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片上传选择</title>
<style>
.img-chooise,
.img-chooise .ze {
height: 150px;
width: 150px;
} .img-chooise {
border: 1px solid #ccc;
box-sizing: border-box;
position: relative;
} .img-chooise .ze {
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.7);
text-align: center;
color: #1E90FF;
display: none;
} .img-chooise .button {
list-style-type: none;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
outline: none;
border: 1px solid #1E90FF;
color: #1E90FF;
padding: 2px 10px;
line-height: 150px;
cursor: pointer;
} .img-chooise .button:hover {
background-color: #1E90FF;
/* Green */
color: white;
} .set>div {
float: left;
margin-left: 20px;
margin-bottom: 20px;
}
</style>
</head> <body>
<div class="set">
<div class="img-chooise">
<img src="data:images/plus.png" style="height: 100%; width: 100%;" />
<div class="ze">
<a type="button" data-type="chooise" class="button">选择</a>
<a type="button" data-type="delete" class="button">删除</a>
</div>
<input type="file" style="display: none;" />
</div>
<div class="img-chooise">
<img src="data:images/plus.png" style="height: 100%; width: 100%;" />
<div class="ze">
<a type="button" data-type="chooise" class="button">选择</a>
<a type="button" data-type="delete" class="button">删除</a>
</div>
<input type="file" style="display: none;" />
</div>
<div class="img-chooise">
<img src="data:images/plus.png" style="height: 100%; width: 100%;" />
<div class="ze">
<a type="button" data-type="chooise" class="button">选择</a>
<a type="button" data-type="delete" class="button">删除</a>
</div>
<input type="file" style="display: none;" />
</div>
<div class="img-chooise">
<img src="data:images/plus.png" style="height: 100%; width: 100%;" />
<div class="ze">
<a type="button" data-type="chooise" class="button">选择</a>
<a type="button" data-type="delete" class="button">删除</a>
</div>
<input type="file" style="display: none;" />
</div>
<div class="img-chooise">
<img src="data:images/plus.png" style="height: 100%; width: 100%;" />
<div class="ze">
<a type="button" data-type="chooise" class="button">选择</a>
<a type="button" data-type="delete" class="button">删除</a>
</div>
<input type="file" style="display: none;" />
</div>
<div class="img-chooise">
<img src="data:images/plus.png" style="height: 100%; width: 100%;" />
<div class="ze">
<a type="button" data-type="chooise" class="button">选择</a>
<a type="button" data-type="delete" class="button">删除</a>
</div>
<input type="file" style="display: none;" />
</div>
<div class="img-chooise">
<img src="data:images/plus.png" style="height: 100%; width: 100%;" />
<div class="ze">
<a type="button" data-type="chooise" class="button">选择</a>
<a type="button" data-type="delete" class="button">删除</a>
</div>
<input type="file" style="display: none;" />
</div>
<div class="img-chooise">
<img src="data:images/plus.png" style="height: 100%; width: 100%;" />
<div class="ze">
<a type="button" data-type="chooise" class="button">选择</a>
<a type="button" data-type="delete" class="button">删除</a>
</div>
<input type="file" style="display: none;" />
</div>
<div class="img-chooise">
<img src="data:images/plus.png" style="height: 100%; width: 100%;" />
<div class="ze">
<a type="button" data-type="chooise" class="button">选择</a>
<a type="button" data-type="delete" class="button">删除</a>
</div>
<input type="file" style="display: none;" />
</div>
<div class="img-chooise">
<img src="data:images/plus.png" style="height: 100%; width: 100%;" />
<div class="ze">
<a type="button" data-type="chooise" class="button">选择</a>
<a type="button" data-type="delete" class="button">删除</a>
</div>
<input type="file" style="display: none;" />
</div>
<div class="img-chooise">
<img src="data:images/plus.png" style="height: 100%; width: 100%;" />
<div class="ze">
<a type="button" data-type="chooise" class="button">选择</a>
<a type="button" data-type="delete" class="button">删除</a>
</div>
<input type="file" style="display: none;" />
</div>
<div class="img-chooise">
<img src="data:images/plus.png" style="height: 100%; width: 100%;" />
<div class="ze">
<a type="button" data-type="chooise" class="button">选择</a>
<a type="button" data-type="delete" class="button">删除</a>
</div>
<input type="file" style="display: none;" />
</div>
<div class="img-chooise">
<img src="data:images/plus.png" style="height: 100%; width: 100%;" />
<div class="ze">
<a type="button" data-type="chooise" class="button">选择</a>
<a type="button" data-type="delete" class="button">删除</a>
</div>
<input type="file" style="display: none;" />
</div>
</div>
</body> </html> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript"> $(function () { //显示与隐藏
$(".img-chooise").on({
mouseover: function () {
$(this).find(".ze").show();
},
mouseout: function () {
$(this).find(".ze").hide();
}
}); //单击选择
$(".img-chooise .ze a").click(function () {
if ($(this).data("type") == "chooise") {
$(this).parent().next().trigger("click");
} else if ($(this).data("type") == "delete") {
$(this).parent().prev().attr("src", "images/plus.png")
}
}); //转base64
$(".img-chooise input[type='file']").change(function (e) {
var that = this;
var file = e.currentTarget.files[0];//$(this).files[0]; if (!/image\/\w+/.test(file.type)) {
alert("请确保文件为图像文件");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
console.log(this.result); $(that).prev().prev().attr("src", this.result);
}
}) })
</script>
图片选择并使用base64展示的更多相关文章
- 利用base64展示图片
其实很简单,格式如下: <img src="data:image/jpg;base64,具体的编码值" /> 支持的类型有: data:,文本数据 data:text/ ...
- 车标知识学习网页开发，与Flask通过base64展示二进制图片 #华为云·寻找黑马程序员#
万法同源 一直觉得可能自己不太适合搞技术,更适合在天桥底下支个摊子说书.技术的东西从来没人关注,扯东扯西的文章莫名的火.之前的一篇文章MarkDown添加图片的三种方式不管是在技术为主的CSDN还是娱 ...
- 通过AngularJS实现图片上传及缩略图展示
从项目中截出的代码 HTML部分: <section> <img src="image/user-tuijian/tuijian_banner.png" /> ...
- js 将图片文件转换成base64
1.情景展示 在JavaScript中,如何使用图片文件转换成base64? 2.解决方案 /** * 网络图像文件转Base64 * @param img dom对象 */ function g ...
- js如何将选中图片文件转换成Base64字符串?
如何将input type="file"选中的文件转换成Base64的字符串呢? 1.首先了解一下为什么要把图片文件转换成Base64的字符串 在常规的web开发过程中,大部分上传 ...
- 【转载】【JAVA秒会技术之图片上传】基于Nginx及FastDFS，完成图片的上传及展示
基于Nginx及FastDFS,完成商品图片的上传及展示 一.传统图片存储及展示方式 存在问题: 1)大并发量上传访问图片时,需要对web应用做负载均衡,但是会存在图片共享问题 2)web应用服务器的 ...
- 【微信小程序云开发】1分钟学会实现上传、下载、预览、删除图片，并且以九宫格展示图片
大家好,我叫小秃僧 这篇文章是讲解云开发如何上传.下载.预览.删除图片,并且以九宫格展示图片的功能 @ 目录 1. 实现效果 2.JavaScript代码 3.wxml代码 4.wxss代码 1. 实 ...
- 仿QQ发语音、图片选择、表情选择demo
一款仿QQ发语音.图片选择.调用拍照.表情选择的demo git地址:https://github.com/PureLovePeter/pic.git. 喜欢的请 star star star,共 ...
- Base64图片编码原理，base64图片工具介绍，图片在线转换Base64
Base64图片编码原理,base64图片工具介绍,图片在线转换Base64 DataURI 允许在HTML文档中嵌入小文件,可以使用 img 标签或 CSS 嵌入转换后的 Base64 编码,减少 ...
随机推荐
- 强连通分量——tarjan算法
概念: 有向图强连通分量:在有向图G中,如果两个顶点vi,vj间(vi>vj)有一条从vi到vj的有向路径,同时还有一条从vj到vi的有向路径,则称两个顶点强连通.如果有向图G的每两个顶点都强连 ...
- 万字分享，我是如何一步一步监控公司MySQL的？
整理了一些Java方面的架构.面试资料(微服务.集群.分布式.中间件等),有需要的小伙伴可以关注公众号[程序员内点事],无套路自行领取 更多优选 一口气说出 9种 分布式ID生成方式,面试官有点懵了 ...
- EIP
EIP中的值就是CPU下次要执行的地址 jmp 直接修改eip的值 1.jmp imm=mov eip,imm 2.jmp r 3.jmp m call 直接修改eip的值,并把当前指令的下一行地址存 ...
- Fastjson <=1.2.62 远程代码执行-漏洞复现
影响范围: Fastjson<=1.2.62 需要开启autotype poc: String text1 = "{\"@type\":\"org.apa ...
- Java TreeSet的使用
1.TreeSe自带排序的set,没有重复元素. 2.TreeSet 如果构造函数中没有使用比较器,那在装载的对象类中要实现Comparable 接口. 3.TreeSet 使用初始化比较器的方式. ...
- ASP.NET Core 借助 Helm 部署应用至K8S
前言 玩K8S也有一段时间了,借助云服务提供商的K8S控制台,已经可以很方便的快速部署应用至K8S.通过简单的点击,可以一次性帮忙创建K8S 对象:Deployment.Service.Ingress ...
- Linux高级系统恢复技术
一,MBR毁坏: 查看系统分区在那: 毁坏MBR: 如果没有重启动,可以直接恢复: 如果重启之后就不可启动系统,需要恢复系统: 出现这样的情况: force off关机,使用光盘启动,添加一个镜像光盘 ...
- 小白学 Python 数据分析（7）：Pandas （六）数据导入
人生苦短,我用 Python 前文传送门: 小白学 Python 数据分析(1):数据分析基础 小白学 Python 数据分析(2):Pandas (一)概述 小白学 Python 数据分析(3):P ...
- JavaScript——基础知识，开始我们的js编程之旅吧！
JavaScript基础第01天 1. 编程语言 编程语言: 可以通过类似于人类语言的"语言"来控制计算机,让计算机为我们做事情,这样的语言就叫做编程语言(Programming ...
- 《ASP.NET Core应用开发入门教程》与《ASP.NET Core 应用开发项目实战》正式出版
“全书之写印,实系初稿.有时公私琐务猬集,每写一句,三搁其笔:有时兴会淋漓,走笔疾书,絮絮不休:有时意趣萧索,执笔木坐,草草而止.每写一段,自助覆阅,辄摇其首,觉有大不妥者,即贴补重书,故剪刀浆糊乃不 ...