input上传图片、单张图片上传，单图上传（限制最大上传数）、多选多图上传

এ᭄ꦿ十二ঞ

已于 2023-07-21 09:26:54 修改

阅读量1.7k

点赞数 1

文章标签： javascript 开发语言

于 2023-06-07 15:40:24 首次发布

本文链接：https://blog.csdn.net/FANSILVLV/article/details/131089227

版权

vue

  <div class="z_photo">
  <img :src="img" alt="" />
    <input
      class="fil"
      type="file"
      value=""
      accept="image/*"
      name="file"
      @change="handleFileChange"
    />
  </div>

const img = ref(require("../assets/img/home_list_icon2.png"));

// 上传头像
const handleFileChange = (el) => {
  let file = el.target.files[0];
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = (e) => {
    img.value = e.target.result;
  };
};
// base64转图片
const getBase64Image = (src) => {
  return new Promise((resolve) => {
    const img = new Image();
    img.crossOrigin = "";
    img.src = src;
    img.onload = function () {
      const canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext("2d");
      ctx?.drawImage(img, 0, 0, img.width, img.height);
      const ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
      const dataURL = canvas.toDataURL("image/" + ext);
      resolve(dataURL);
    };
  });
};

jq

  <input class="shangchuan" class="fil" type="file" value="" accept="image/*" name="file"  />
   $(function () {
    $(".shangchuan").on('change', function (el) {
      let file = el.target.files[0];
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = (e) => {
        console.log(' e.target.result', e.target.result);
        // img.value = e.target.result;
      };
    });
  })

单张上传限制总数（jq）

css

 .pop-list-box {
      margin-top: 20px;
      width: 100%;
    }

    .pop-list-tit {
      color: rgba(51, 51, 51, 1);
      font-size: 16px;
      font-weight: 800;
      margin-bottom: 10px;
    }
    /* 上传图片 */
    .imgs-box {
      width: 100%;
      display: flex;
      align-items: center;
      column-gap: 30px;
    }

    .list-img {
      position: relative;
    }

    .close1 {
      width: 16px;
      height: 16px;
      margin-left: auto;
      display: block;
      z-index: 10;
      position: absolute;
      right: -7px;
      top: -9px;
      cursor: pointer;
    }

    .shang {
      background: url(../../../assets/images/icons/addimg.png) no-repeat;
      background-size: 100%;
    }

    .z_photo {
      width: 90px;
      height: 90px;
      position: relative;
      border: none;
    }

    .z_photo input[type="file"] {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      opacity: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }

    .z_photo>.img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 4px;
    }

    .shangchuan {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0;
      border: none;
      resize: none;
      cursor: pointer;
    }

 <div class="pop-list-box">
      <div class="pop-list-tit">
         上传图片
       </div>
       <div class="imgs-box">
         <!-- <div class="list-img">
<div class="close">
  <img src="../../../assets/img/icon/close (2).png" alt="">
</div>
<div class="z_photo">
  <img src="" alt="" class="img" />
</div>
 </div> -->
         <div class="list-img">
           <div class="z_photo shang">
             <input accept="image/*" class="shangchuan fil" name="file" type="file" value="" />
           </div>
         </div>
       </div>
     </div>

js

//记得引入jq
<script src="../../assets/js/base/jquery-3.2.1.js"></script>
 // 图片上传
    index = 0; //图片数量
    const imageArray = new Map(); //保存的图片数量
    // 删除图片
    function delate(val) {
      console.log("val ", val);
      imageArray.delete(val);
      index--;
      if (index <= 4) {
        $(".shangchuan").parent().parent().css("display", "block");
      }
    }
    $(".shangchuan").on("change", function (el) {
      index++;
      const _this = this;
      let file = el.target.files[0];
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = (e) => {
        if (index >= 4) {
          $(_this).parent().parent().css("display", "none");
        }
        if (index > 4) {
          toast("最多只能上传四张图片", 3000);
          return;
        } else {
          const content =
            ` <div class="list-img">
            <div class="close1" data-index="${index}">
              <img src="../../assets/images/icons/close2.png" alt="">
            </div>
            <div class="z_photo">
              <img src="` +
            e.target.result +
            `" alt="" class="img" />
            </div>
          </div>`;
          $(_this).parent().parent().before(content);
          // imageArray.push(e.target.result);
          imageArray.set(`${index}`, e.target.result);

          $(_this).val("");
          $(".close1").unbind("click");
          $(".close1").on("click", function () {
            console.log($(this).attr("data-index"));
            delate($(this).attr("data-index"));
            $(this).parent().remove();
          });
        }
      };
    });

多图上传

 <div class="imgs-box">
      <!-- <div class="list-img">
        <div class="close">
          <img src="../../assets/img/icon/close (2).png" alt="">
        </div>
        <div class="z_photo">
          <img src="" alt="" class="img" />
        </div>
      </div> -->
      <div class="list-img">
        <div class="z_photo shang">
          <input class="shangchuan" class="fil" type="file" value="" multiple accept="image/*" name="file" />
        </div>
      </div>
    </div>

index = 0; //图片数量
    const imageArray = new Map(); //保存的图片数量
    // 删除图片
    function delate(val) {
      imageArray.delete(val);
      index--;
      if (index <= 4) {
        $(".shangchuan").parent().parent().css("display", "block");
      }
    }
    $(".shangchuan").on("change", function (el) {
      // 1.单张图片上传
      // index++; 

      // 1.多张图片上传
      index = index + el.target.files.length;

      const _this = this;

      // 2.1 单张图片回显
      // let file = el.target.files[0];
      // reader.readAsDataURL(file);
      // 2.2多张图片回显
      // let i = el.target.files.length;
      for (let index = 0; index < el.target.files.length; index++) {
        //2. 图片回显
        var reader = new FileReader();
        reader.readAsDataURL(el.target.files[index]);
        //多张图片回显

        reader.onload = (e) => {
          if (index >= 4) {
            $(_this).parent().parent().css("display", "none");
          }
          if (index > 4) {
            toast("最多只能上传四张图片", 3000);
            return;
          } else {
            const content =
              ` <div class="list-img">
            <div class="close" data-index="${index}">
              <img src="../../assets/img/icon/close (2).png" alt="">
            </div>
            <div class="z_photo">
              <img src="` +
              e.target.result +
              `" alt="" class="img" />
            </div>
          </div>`;
            $(_this).parent().parent().before(content);
            // imageArray.push(e.target.result);
            imageArray.set(`${index}`, e.target.result);

            $(_this).val("");
            $(".close").unbind("click");
            $(".close").on("click", function () {
              console.log($(this).attr("data-index"));
              delate($(this).attr("data-index"));
              $(this).parent().remove();
            });
          }
        };
      }

    });