图片选择并使用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 编码,减少 ...
随机推荐
- Visual Studio 2015 配置 Python 环境
Visual Studio 2015可以在安装时选择安装Python环境,首次使用VS2015执行python时需要配置环境变量: 配置VS2015的环境前需要先下载Python并安装: https: ...
- Keras学习系列——神经网络层组件
对Keras提供的对各种层的抽象进行相对全面的概括 1 基础常用层 名称 作用 原型参数 Dense 实现全连接层 Dense(units,activation,use_bias=True, kern ...
- Java面试题之“==”和“equals()”方法的区别？
一.“== ”:运算符 1.可以使用在基本数据类型变量和引用数据类型变量中. 2.如果比较的是基本数据类型变量:比较的是两个变量保存的数据是否相等.(不一定类型要相同) 3.如果比较的是引用数据类型变 ...
- 几个点认识Nginx服务器
Nginx 其实就是一款轻量级的 Web 服务器.反向代理服务器,由于它的内存占用少,启动极快,高并发能力强,在互联网项目中广泛应用. 那么你可能会问了:“不是说 Nginx 吗?怎么又扯出来一个 W ...
- day14 jQuery
day13-14 jQueryjQuery是对js和dom的封装,相当于一个类库使用jQuery的目的: 1:获取标签 2:修改jQuery提供的方法:http://www.php100.com/ma ...
- oracle系列练习题
刚学习Oracle,老师给我们布置了一些题目来练习. 题目: 创建四个表,并录入数据 1.student表 CREATE TABLE STUDENT (SNO VARCHAR(3) NOT NULL, ...
- http报文解析
http报文结构 报文首部 起始行 请求报文的起始行: 方法(method) request-URL version(http协议版本) 响应报文的起始行 HTTP响应码 请求头 通用首部 请求首部 ...
- python实现自动点赞
1.思路通过pyautogui可以实现鼠标点击.滚动鼠标.截屏等操作.由此功能实现打开页面,进行点赞.aircv可以从大图像获得小图像的位置,利用pyautogui截屏得到的图片,可以在页面获取到每一 ...
- 分布式系统的CAP定理
CAP定理: 在一个分布式系统中,Consistency(数据一致性). Availability(服务可用性).Partition tolerance(分区容错性),三者不可兼得. 一致性(Cons ...
- cesium结合geoserver利用WFS服务实现图层新增(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...