面向对象编程-图片选择添加预览-基于jQuery

最新推荐文章于 2023-06-28 09:55:31 发布

咸蛋不会翻身

最新推荐文章于 2023-06-28 09:55:31 发布

阅读量394

点赞数 1

分类专栏：【博学谷学习记录】超强总结，用心分享文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_36145110/article/details/127146483

版权

【博学谷学习记录】超强总结，用心分享专栏收录该内容

21 篇文章 0 订阅

订阅专栏

我们平时做上传图片的时候都会用到一个功能就是选择本地图片+预览

今天我用面向对象编程的思路弄了一个例子

首先先画好css样式我弄了一个简单款

给外面的盒子设置flex布局然后picture元素不设置宽度设置flex：1

然后添加按钮宽度固定，将input隐藏

这是没有图片点击的时候的效果下面是基本的html代码

    <div class="box">
      <div class="picturebox" id="picturebox">
        <div class="picture">
          <input type="file" accept="image/*" id="tp" />
          <ul></ul>
        </div>
        <a href="JavaScript:;" class="add">＋</a>
      </div>
    </div>

我们给加号按钮添加点击事件，当我们点击的时候出发input的点击事件

      constructor() {
        that = this;
        $("#picturebox .add").on("click", this.add);
        $("#picturebox ul").on("click", "a", this.deletes);
        $("#picturebox #tp").on("change", this.input_change);
      }
      add() {
        //触发input点击事件
        $("#picturebox #tp").val("");
        $("#picturebox #tp").click();
      }

当input内容被改变的时候将文件的base64内容赋值给li里面的img 从而实现预览

      input_change() {
        var file = this.files[0];
        console.log("图片选择成功", file);
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
          var li =
            '<li><img src="' +
            this.result +
            '" /><a href="JavaScript:;">×</a></li>';
          $("#picturebox ul").append(li);
          that.size_change();
        };
      }

然后我们做个判断当当前盒子容不下那么多图片的时候会把加号隐藏，当盒子容的下的时候加号显示

      size_change() {
        // 48*n 39
        // 距离不够了 就将添加按钮隐藏
        var disparity =
          $("#picturebox").width() - $("#picturebox .add").width();
        var ul_length = $("#picturebox li").length * 48;
        console.log(disparity);
        console.log("ul_length", ul_length);
        if (disparity < ul_length) {
          $(".add").css("display", "none");
        } else {
          $(".add").css("display", "");
        }
      }

这是最后的效果的gif图

附上代码（记得引入jquery.js哦！！）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片添加功能</title>
    <script src="./jquery-min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style-type: none;
        text-decoration: none;
      }
      .box {
        width: 205px;
        /* width: 400px; */
      }
      .picturebox {
        padding: 5px;
        border: 1px solid black;
        border-radius: 5px;
        display: flex;
      }
      .picturebox .add {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 900;
        font-size: 25px;
        width: 48px;
        height: 48px;
        border-radius: 10px;
        background-color: black;
        color: aliceblue;
      }
      .picturebox .picture {
        position: relative;
        overflow: hidden;
      }
      .picturebox .picture input[type="file"] {
        position: absolute;
        top: 0;
        padding: 0;
        visibility: hidden;
      }
      .picturebox ul {
        flex: 1;
        height: 48px;
        /* background-color: pink; */
        overflow: hidden;
      }
      .picturebox ul li {
        position: relative;
        float: left;
        width: 48px;
        height: 48px;
        border-radius: 10px;
        /* background-color: blue; */
      }
      .picturebox ul li img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        /* border: 1px solid black; */
      }
      .picturebox ul li a {
        position: absolute;
        top: 0;
        right: 0;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        background-color: black;
        text-align: center;
        font-size: 16px;
        line-height: 20px;
        font-weight: 900;
        color: aliceblue;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="picturebox" id="picturebox">
        <div class="picture">
          <input type="file" accept="image/*" id="tp" />
          <ul></ul>
        </div>
        <a href="JavaScript:;" class="add">＋</a>
      </div>
    </div>
  </body>
  <script>
    var that = null;
    class picture {
      constructor() {
        that = this;
        $("#picturebox .add").on("click", this.add);
        $("#picturebox ul").on("click", "a", this.deletes);
        $("#picturebox #tp").on("change", this.input_change);
      }
      add() {
        //触发input点击事件
        $("#picturebox #tp").val("");
        $("#picturebox #tp").click();
      }
      deletes() {
        //删除被点击的图片
        $(this).parent().remove();
        that.size_change();
        return false; //阻止继续冒泡了
      }
      //input的内容发生改变时候触发的事件
      input_change() {
        var file = this.files[0];
        console.log("图片选择成功", file);
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
          var li =
            '<li><img src="' +
            this.result +
            '" /><a href="JavaScript:;">×</a></li>';
          $("#picturebox ul").append(li);
          that.size_change();
        };
      }
      size_change() {
        // 48*n 39
        // 距离不够了 就将添加按钮隐藏
        var disparity =
          $("#picturebox").width() - $("#picturebox .add").width();
        var ul_length = $("#picturebox li").length * 48;
        console.log(disparity);
        console.log("ul_length", ul_length);
        if (disparity < ul_length) {
          $(".add").css("display", "none");
        } else {
          $(".add").css("display", "");
        }
      }
    }
    var a = new picture();
  </script>
</html>

【博学谷学习记录】超强总结，用心分享