图片选择并使用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 编码,减少 ...
随机推荐
- Go语言实现：【剑指offer】和为S的两个数字
该题目来源于牛客网<剑指offer>专题. 输入一个递增排序的数组和一个数字S,在数组中查找两个数,使得他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 对应每个测试案 ...
- c++利用初始化列表在类内部和类外部定义构造函数的区别
case 1:在类外定义构造函数,所有data member都在初始化列表中进行初始化. class SupportClass { public: SupportClass() { cout < ...
- 二叉树的非递归遍历C++实现
#include<iostream> #include<stdlib.h> #define maxsize 100 using namespace std; typedef s ...
- 【JavaScript】进制转换&位运算，了解一下？
前言 在一般的代码中很少会接触到进制和位运算,但这不代表我们可以不去学习它.作为一位编程人员,这些都是基础知识.如果你没有学过这方面的知识,也不要慌,接下来的知识并不会很难.本文你将会学习到: 进制转 ...
- 底层解析web安全软件
试用了一些 web安全软件,服务器安全狗.云锁.绿盟…… 感觉里面有些功能是可以手动优化的,大概总结一下. 1.禁止 ping 这是服务器比较常用的功能,防止pin ...
- 一起了解 .Net Foundation 项目 No.6
.Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. .NET Micro Fr ...
- echarts 的 formatter用法
前言:formatter格式化方法.使用formatter调用自定义的数据,把内容通过处理让变成我们想要的样子. 比如,echarts数据显示是这样的(bug:部分内容被隐藏掉了,显示太长,不美观) ...
- 实训第八天 有关python orm 的学习记录 常用方法01
沿用第七天的数据库,数据库现在是这样的: 配置好主路由include子路由 子路由引入views 在views页面定义test测试请求如下: def test(request): # 1.all()方 ...
- 会话技术中的Cookie与session
关于会话技术 会话:一次会话中包含多次请求和响应. 一次会话:浏览器第一次给服务器资源发送请求,会话建立,直到有一方断开为止 功能:在一次会话的范围内的多次请求间,共享数据 方式: 客户端会话技术:C ...
- CAP原理
定义 在一个分布式系统(指系统中的节点互相连接并共享数据)中,当涉及读写操作时,只能保证一致性 (Consistency).可用性 (Availability).分区容错性 (Partition To ...