js上传多张图片并显示

阳光穿透心脏的1/2处 2022-09-14 08:42 295阅读 0赞

<!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>
      </head>
      <body>
        <input type="file" id="upload" />
        <div id="uploadBox"></div>
        <script>
          var filename = document.getElementById("upload");
          //定义一个数组来放图片,我每上传一张图片都放进来
          var imgs = [];
          filename.onchange = function () {
            var file = this.files;
            // console.log(file.length);
            // console.log("haha");
            // var reader = new FileReader();
            // reader.readAsDataURL(file[0]);
            // reader.onload = function () {
            //   document.getElementById("uploadBox").innerHTML +=
            //     "<div class='divImg' id='uploadImg'><img src='" +
            //     reader.result +
            //     "' class='imgBiMG' style='width:400px'></div>";
            for (i = 0; i < file.length; i++) {
              //这个其实也是相当于异步调用的，只要我每次进入重新给我的图片新开一个位置就好了，也不要循环，就是每次我上传
              //我的图片都有一个新的位置，原理的上传过的图片不会动
              console.log(i);
              var reader = new FileReader();
              reader.readAsDataURL(file[i]);
              reader.onload = function () {
                // imgbq.style.width = "400px";
                // imgbq.src = reader.result;
                // console.log(imgbq.src);
                document.getElementById("uploadBox").innerHTML +=
                  "<div class='divImg' id='uploadImg'><img src='" +
                  reader.result +
                  "' class='imgBiMG' style='width:400px'></div>";
              };
              console.log(document.getElementById("uploadBox"));
              //   imgs.push(filename[i].files[0]);
            }
          };
        </script>
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Insert title here</title>
        <style>
          body {
            background: #edf0f2;
          }
          img {
            width: 100%;
            display: block;
            border: none;
            vertical-align: bottom;
            border: none;
          }
          input[type="button"] {
            -webkit-appearance: none;
          }
          .productDrawingBox {
            background-color: #fcfcfc;
            color: #333333;
            font-size: 16px;
            padding-left: 11px;
            border-bottom: solid 1px #e5e5e5;
          }
          .productDescription {
            height: 44px;
            line-height: 44px;
          }
          .productImg {
            height: 96px;
            overflow: hidden;
          }
          .imgBiMG {
            width: 78px;
            height: 81px;
            float: left;
            display: block;
          }
          .uploadDIv {
            width: 78px;
            height: 81px;
            background-color: #edf0f2;
            font-size: 28px;
            color: #bfbfbf;
            text-align: center;
            line-height: 81px;
            float: left;
            position: relative;
          }
          .uploadDIv input {
            width: 78px;
            height: 78px;
            opacity: 0;
            position: absolute;
            right: 0px;
            top: 0px;
            z-index: 4;
            padding: 0;
          }
        </style>
      </head>
      <body>
        <div class="productDrawingBox">
          <div class="productDescription">上传图片</div>
          <div class="productImg">
            <div id="uploadBox"></div>
            <div class="uploadDIv">
              <span>+</span
              ><input
                type="file"
                name="file"
                multiple
                id="inputs"
                accept="image/*"
                class="fileTest"
                multiple="multiple"
              />
            </div>
          </div>
        </div>
      </body>
      
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
      <script type="text/javascript">
        $(function () {
          var img = []; //创建一个空对象用来保存传入的图片
          var AllowImgFileSize = "101376"; //1兆
          $("#inputs").change(function () {
            var fil = this.files;
            console.log(fil.length);
            for (var i = 0; i < fil.length; i++) {
              var curr = $("#inputs")[i].files[0].size;
              if (curr > AllowImgFileSize * 101376) {
                //当图片大于1兆提示
                layer.msg("图片文件大小超过限制 请上传小于99M的文件");
              } else {
                reads(fil[i]);
                img.push($("#inputs")[i].files[0]); //将传入的图片push到空对象中
              }
            }
            if (img.length >= 6) {
              //判断图片的数量，数量不能超过3张
              $(".uploadDIv").hide();
            } else {
              $(".uploadDIv").show();
            }
            console.log(img);
          });
    
          function reads(fil) {
            var reader = new FileReader();
            reader.readAsDataURL(fil);
            reader.onload = function () {
              document.getElementById("uploadBox").innerHTML +=
                "<div class='divImg' id='uploadImg'><img src='" +
                reader.result +
                "' class='imgBiMG'></div>";
            };
          }
        });
      </script>
    </html>