图片选择并使用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 编码,减少 ...
随机推荐
- 清晰架构（Clean Architecture）的Go微服务
我用Go和gRPC创建了一个微服务项目,并试图找出最好的程序结构,它可以作为我其他项目的模板.我还将程序设计和编程的最佳实践应用于Go Microservice程序,例如清晰架构(Clean Arch ...
- 视觉光盘，只有我可以贴全世界唯一，Windows上最高级的DOCKER客户端数字, 夜晚点击一个都没有，值班的小编辛苦了
继上一篇视觉光盘,只有我可以贴全世界唯一,你永远截不到的图片(小编请用人性化语言解释移出首页) 合体了 晚上的小编, 呆了吗? 我看到了少于150字的随笔不允许发布到网站首页 我决定了用我专业的龟式输 ...
- C++ STL——优先队列的结构体表示方法
优先队列是队列的一种,但是自身具有一定的排序功能,所以不具有队列“先进先出”的性质 刚刚接触优先队列,看过网上的用法后感觉还是太过于朦胧,所以打算自己写一个稍微细节一点的. 头文件 #include& ...
- Jmeter之安装与环境配置
前言 本次的教程是Jmeter的安装与配置 1.安装JDK并配置好环境变量,在系统变量中添加JAVA_HOME变量 在系统变量path中添加 %JAVA_HOME%\bin 2.打开Jmeter官网: ...
- coroutine - yield from
yield from yield from x 表达式对 x 对象所做的第一件事是,调用 iter(x),从中获取迭代器.因 此, x 可以是任何可迭代的对象. 可是,如果 yield from 结构 ...
- Python字符串字母大小写变换
说明: 字符串就是一系列字符,在Python中用引号括起来的都是字符串,引号可以是单引号,也可以是双引号,比如:“This is a book.” ‘This is an apple.’ 接下来简单 ...
- codewars--js--Simple string expansion+ repeat()，includes()方法
问题描述: Consider the following expansion: solve("3(ab)") = "ababab" -- "ab&qu ...
- php/phpmyadmin新手式环境搭建
之前就在折腾 zabbix 的时候遇到一个情况, 安装 php6 的时候各种库丢失, 最重要的 gd 经常跑路 只是无意中遇到了一种小方式, 现在已经迷糊了, 前天因为在部署 phpAdmin 的时候 ...
- WPF 原生绑定和命令功能使用指南
WPF 原生绑定和命令功能使用指南 魏刘宏 2020 年 2 月 21 日 如今,当谈到 WPF 时,我们言必称 MVVM.框架(如 Prism)等,似乎已经忘了不用这些的话该怎么使用 WPF 了.当 ...
- 展讯sprd_battery.c 充电驱动
sprd_battery.c 是充电驱动,这个是充电功能的核心内容,电量显示策略.温度检测策略.充电保护机制等功能在这里实现,功能实现与硬件细节剥离,调用通用接口实现逻辑控制: 1 sprdbat_p ...