1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>图片上传选择</title>
  9.     <style>
  10.         .img-chooise,
  11.         .img-chooise .ze {
  12.             height: 150px;
  13.             width: 150px;
  14.         }
  15.  
  16.         .img-chooise {
  17.             border: 1px solid #ccc;
  18.             box-sizing: border-box;
  19.             position: relative;
  20.         }
  21.  
  22.         .img-chooise .ze {
  23.             position: absolute;
  24.             top: 0;
  25.             left: 0;
  26.             right: 0;
  27.             background-color: rgba(0, 0, 0, 0.7);
  28.             text-align: center;
  29.             color: #1E90FF;
  30.             display: none;
  31.         }
  32.  
  33.         .img-chooise .button {
  34.             list-style-type: none;
  35.             -webkit-transition-duration: 0.4s;
  36.             /* Safari */
  37.             transition-duration: 0.4s;
  38.             outline: none;
  39.             border: 1px solid #1E90FF;
  40.             color: #1E90FF;
  41.             padding: 2px 10px;
  42.             line-height: 150px;
  43.             cursor: pointer;
  44.         }
  45.  
  46.         .img-chooise .button:hover {
  47.             background-color: #1E90FF;
  48.             /* Green */
  49.             color: white;
  50.         }
  51.  
  52.         .set>div {
  53.             float: left;
  54.             margin-left: 20px;
  55.             margin-bottom: 20px;
  56.         }
  57.     </style>
  58. </head>
  59.  
  60. <body>
  61.     <div class="set">
  62.         <div class="img-chooise">
  63.             <img src="data:images/plus.png" style="height: 100%; width: 100%;" />
  64.             <div class="ze">
  65.                 <a type="button" data-type="chooise" class="button">选择</a>
  66.                 <a type="button" data-type="delete" class="button">删除</a>
  67.             </div>
  68.             <input type="file" style="display: none;" />
  69.         </div>
  70.         <div class="img-chooise">
  71.             <img src="data:images/plus.png" style="height: 100%; width: 100%;" />
  72.             <div class="ze">
  73.                 <a type="button" data-type="chooise" class="button">选择</a>
  74.                 <a type="button" data-type="delete" class="button">删除</a>
  75.             </div>
  76.             <input type="file" style="display: none;" />
  77.         </div>
  78.         <div class="img-chooise">
  79.             <img src="data:images/plus.png" style="height: 100%; width: 100%;" />
  80.             <div class="ze">
  81.                 <a type="button" data-type="chooise" class="button">选择</a>
  82.                 <a type="button" data-type="delete" class="button">删除</a>
  83.             </div>
  84.             <input type="file" style="display: none;" />
  85.         </div>
  86.         <div class="img-chooise">
  87.             <img src="data:images/plus.png" style="height: 100%; width: 100%;" />
  88.             <div class="ze">
  89.                 <a type="button" data-type="chooise" class="button">选择</a>
  90.                 <a type="button" data-type="delete" class="button">删除</a>
  91.             </div>
  92.             <input type="file" style="display: none;" />
  93.         </div>
  94.         <div class="img-chooise">
  95.             <img src="data:images/plus.png" style="height: 100%; width: 100%;" />
  96.             <div class="ze">
  97.                 <a type="button" data-type="chooise" class="button">选择</a>
  98.                 <a type="button" data-type="delete" class="button">删除</a>
  99.             </div>
  100.             <input type="file" style="display: none;" />
  101.         </div>
  102.         <div class="img-chooise">
  103.             <img src="data:images/plus.png" style="height: 100%; width: 100%;" />
  104.             <div class="ze">
  105.                 <a type="button" data-type="chooise" class="button">选择</a>
  106.                 <a type="button" data-type="delete" class="button">删除</a>
  107.             </div>
  108.             <input type="file" style="display: none;" />
  109.         </div>
  110.         <div class="img-chooise">
  111.             <img src="data:images/plus.png" style="height: 100%; width: 100%;" />
  112.             <div class="ze">
  113.                 <a type="button" data-type="chooise" class="button">选择</a>
  114.                 <a type="button" data-type="delete" class="button">删除</a>
  115.             </div>
  116.             <input type="file" style="display: none;" />
  117.         </div>
  118.         <div class="img-chooise">
  119.             <img src="data:images/plus.png" style="height: 100%; width: 100%;" />
  120.             <div class="ze">
  121.                 <a type="button" data-type="chooise" class="button">选择</a>
  122.                 <a type="button" data-type="delete" class="button">删除</a>
  123.             </div>
  124.             <input type="file" style="display: none;" />
  125.         </div>
  126.         <div class="img-chooise">
  127.             <img src="data:images/plus.png" style="height: 100%; width: 100%;" />
  128.             <div class="ze">
  129.                 <a type="button" data-type="chooise" class="button">选择</a>
  130.                 <a type="button" data-type="delete" class="button">删除</a>
  131.             </div>
  132.             <input type="file" style="display: none;" />
  133.         </div>
  134.         <div class="img-chooise">
  135.             <img src="data:images/plus.png" style="height: 100%; width: 100%;" />
  136.             <div class="ze">
  137.                 <a type="button" data-type="chooise" class="button">选择</a>
  138.                 <a type="button" data-type="delete" class="button">删除</a>
  139.             </div>
  140.             <input type="file" style="display: none;" />
  141.         </div>
  142.         <div class="img-chooise">
  143.             <img src="data:images/plus.png" style="height: 100%; width: 100%;" />
  144.             <div class="ze">
  145.                 <a type="button" data-type="chooise" class="button">选择</a>
  146.                 <a type="button" data-type="delete" class="button">删除</a>
  147.             </div>
  148.             <input type="file" style="display: none;" />
  149.         </div>
  150.         <div class="img-chooise">
  151.             <img src="data:images/plus.png" style="height: 100%; width: 100%;" />
  152.             <div class="ze">
  153.                 <a type="button" data-type="chooise" class="button">选择</a>
  154.                 <a type="button" data-type="delete" class="button">删除</a>
  155.             </div>
  156.             <input type="file" style="display: none;" />
  157.         </div>
  158.         <div class="img-chooise">
  159.             <img src="data:images/plus.png" style="height: 100%; width: 100%;" />
  160.             <div class="ze">
  161.                 <a type="button" data-type="chooise" class="button">选择</a>
  162.                 <a type="button" data-type="delete" class="button">删除</a>
  163.             </div>
  164.             <input type="file" style="display: none;" />
  165.         </div>
  166.     </div>
  167. </body>
  168.  
  169. </html>
  170.  
  171. <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  172. <script type="text/javascript">
  173.  
  174.     $(function () {
  175.  
  176.         //显示与隐藏
  177.         $(".img-chooise").on({
  178.             mouseover: function () {
  179.                 $(this).find(".ze").show();
  180.             },
  181.             mouseout: function () {
  182.                 $(this).find(".ze").hide();
  183.             }
  184.         });
  185.  
  186.         //单击选择
  187.         $(".img-chooise .ze a").click(function () {
  188.             if ($(this).data("type") == "chooise") {
  189.                 $(this).parent().next().trigger("click");
  190.             } else if ($(this).data("type") == "delete") {
  191.                 $(this).parent().prev().attr("src", "images/plus.png")
  192.             }
  193.         });
  194.  
  195.         //转base64
  196.         $(".img-chooise input[type='file']").change(function (e) {
  197.             var that = this;
  198.             var file = e.currentTarget.files[0];//$(this).files[0];
  199.  
  200.             if (!/image\/\w+/.test(file.type)) {
  201.                 alert("请确保文件为图像文件");
  202.                 return false;
  203.             }
  204.             var reader = new FileReader();
  205.             reader.readAsDataURL(file);
  206.             reader.onload = function (e) {
  207.                 console.log(this.result);
  208.  
  209.                 $(that).prev().prev().attr("src", this.result);
  210.             }
  211.         })
  212.  
  213.     })
  214. </script>

　　

图片选择并使用base64展示的更多相关文章

  1. 利用base64展示图片

    其实很简单,格式如下: <img src="data:image/jpg;base64,具体的编码值" /> 支持的类型有: data:,文本数据 data:text/ ...

  2. 车标知识学习网页开发，与Flask通过base64展示二进制图片 #华为云·寻找黑马程序员#

    万法同源 一直觉得可能自己不太适合搞技术,更适合在天桥底下支个摊子说书.技术的东西从来没人关注,扯东扯西的文章莫名的火.之前的一篇文章MarkDown添加图片的三种方式不管是在技术为主的CSDN还是娱 ...

  3. 通过AngularJS实现图片上传及缩略图展示

    从项目中截出的代码 HTML部分: <section> <img src="image/user-tuijian/tuijian_banner.png" /> ...

  4. js 将图片文件转换成base64

      1.情景展示 在JavaScript中,如何使用图片文件转换成base64? 2.解决方案 /** * 网络图像文件转Base64 * @param img dom对象 */ function g ...

  5. js如何将选中图片文件转换成Base64字符串?

    如何将input type="file"选中的文件转换成Base64的字符串呢? 1.首先了解一下为什么要把图片文件转换成Base64的字符串 在常规的web开发过程中,大部分上传 ...

  6. 【转载】【JAVA秒会技术之图片上传】基于Nginx及FastDFS，完成图片的上传及展示

    基于Nginx及FastDFS,完成商品图片的上传及展示 一.传统图片存储及展示方式 存在问题: 1)大并发量上传访问图片时,需要对web应用做负载均衡,但是会存在图片共享问题 2)web应用服务器的 ...

  7. 【微信小程序云开发】1分钟学会实现上传、下载、预览、删除图片，并且以九宫格展示图片

    大家好,我叫小秃僧 这篇文章是讲解云开发如何上传.下载.预览.删除图片,并且以九宫格展示图片的功能 @ 目录 1. 实现效果 2.JavaScript代码 3.wxml代码 4.wxss代码 1. 实 ...

  8. 仿QQ发语音、图片选择、表情选择demo

    一款仿QQ发语音.图片选择.调用拍照.表情选择的demo git地址:https://github.com/PureLovePeter/pic.git.  喜欢的请 star  star star,共 ...

  9. Base64图片编码原理，base64图片工具介绍，图片在线转换Base64

    Base64图片编码原理,base64图片工具介绍,图片在线转换Base64 DataURI 允许在HTML文档中嵌入小文件,可以使用 img 标签或 CSS 嵌入转换后的 Base64 编码,减少  ...

随机推荐

  1. 14-Response

    今日知识 1. response 2. ServletContext对象 response * 功能:设置响应消息 1. 设置响应行 1. 格式:HTTP/1.1 200 ok 2. 设置状态码:se ...

  2. Hibernate框架预览以及基础介绍

    前言 从本节我们开始进入到对于Hibernate框架的学习,当前Hibernate框架还未正式发布6.0稳定版本,所以这里我们以5.4.12Final版本进行讲解. Hibernate框架 Hiber ...

  3. SQL Server 2019 表无法修改问题

    SQL Server 2019 表无法修改问题 问题描述: 解决方法: 1.在菜单栏中,点击工具->选项,示例: 2.在选项中单击设计器->表设计器和数据库设计器->取消勾选阻止保存 ...

  4. PMP--2.1 商业论证（经济可行性研究报告）

    ####################################################### PS:半个月没有更新文档,因为是有点单线程,在整理启动过程组和规划过程组的内容,在规划规 ...

  5. clr via c# clr寄宿和AppDomain (一)

    1 clr寄宿-----.net framework在windows平台的顶部允许.者意味着.net framework必须用windows能理解的技术来构建.所有托管模块和程序集文件必须使用wind ...

  6. 通配符与标签!important的背景展示，也是让我怀疑人生了

    是谁在耳边对我说!important提升权重优先级,只为这一句,我用了3600s研究通配符与标签!important的背景展示,也是让我怀疑人生了!选择器权值:标签选择器1,类选择器和伪类选择器:10 ...

  7. MySQL面试笔试题集-BAT

    01.MySQL技术特点? Mysql数据库软件是一个客户端或服务器系统,支持各种客户端程序和库的多线程SQL服务器.不同的后端.广泛的应用程序编程接口和管理工具 02.MySQL默认端口号? 330 ...

  8. docker配置仓库源

    1 修改docker配置文件 下面的内网ip改成公司的私有仓库地址 后面两个建议保留(一个是国内加速源,一个是国外仓库.这两个删了也是可以的) 2 重启docker服务 # vim /etc/dock ...

  9. nginx基础（二）

    二.nginx基础配置 (1)错误指向一个页面 http状态指向指定访问页面,在 /etc/nginx/conf.d/default.conf 中配置 error_page /50x.html; er ...

  10. opencv —— Sobel 一阶导数算子、Scharr 滤波器 一阶导数用于边缘检测

    sobel 算子的基本概念 sobel 算子是一个主要用于边缘检测的离散微分算子,它结合了高斯平滑和微分求导,用于计算图像灰度函数的近似梯度. 其基础来自于一个事实,即在边缘部分,像素值出现“跳跃”或 ...