js多图上传

最新推荐文章于 2024-07-18 10:24:18 发布

天香自然，地上红豆

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量230

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/tianxianghuiwei/article/details/133209317

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>HTML多图上传</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>
       <script src="js/jquery-3.6.3.js"></script>
   </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>

       <script type="text/javascript">
           $(function() {
               var img = []; //创建一个空对象用来保存传入的图片
               var AllowImgFileSize = '101376'; //1兆
               $("#inputs").change(function() {
                   var fil = this.files;
                   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>
   </body>

</html>