图片选择并使用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 编码,减少 ...
随机推荐
- TTStand 基础知识[8] Build-In StepTypes(3)
Build-In Step Types的最后一篇,前面两篇的连接如下: TestStand 基础知识[7] Build-In StepTypes(2) TestStand 基础知识[6] Build- ...
- Shiro权限验证说明
1.简介 shiro是一个安全框架,是Apache的一个子项目.shiro提供了:认证.授权.加密.会话管理.与web集成.缓存等模块. 1.1.模块介绍 Authentication:用户身份识别, ...
- OFDM Modulation Scheme
- Linux 下用 superpi 测试 CPU 性能
- 【转载】python_logging模块
原文:https://www.cnblogs.com/liujiacai/p/7804848.html 1 logging模块简介 logging模块是Python内置的标准模块,主要用于输出运行日志 ...
- axios中qs的使用
首先qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装. 地址: https://www.npmjs.com/package/qs qs.parse().qs.string ...
- MySQL中的索引、左连接、右连接、join、sql执行顺序
逻辑架构: 1.连接层 2.服务层 3.引擎层(插拔式) 4.存储层 存储引擎: 常用的有:MyISAM.InnoDB 查看命令:show variables like '%storage_engin ...
- pikachu-越权漏洞（Over Permission）
一.越权漏洞概述 1.1 概述 由于没有用户权限进行严格的判断,导致低权限的账户(例如普通用户)可以去完成高权限账户(例如管理员账户)范围内的操作. 1.2 越权漏洞的分类 (1)平行越权 ...
- SAP 对HU做货物移动报错-Only 0 serial numbers entered instead of 30 -
SAP 对HU做货物移动报错-Only 0 serial numbers entered instead of 30 - 元旦刚过,就收到客户的业务人员报错说,当其对HU做转库(同一个公司代码下工厂到 ...
- java工作流系统表单自动 获取数据
关键词:工作流快速开发平台 工作流流设计 业务流程管理 asp.net 开源工作流 bpm工作流系统 java工作流主流框架 自定义工作流引擎 表单设计器 流程设计器 什么是数据自动获 ...