使用jQuery实现多文件上传、实时预览及删除功能教程

<form action="" method="POST" enctype="multipart/form-data">
  <div class="col-lg-12 mt-4">
    <label for="files">{{ __('Upload Receipts/Bills (Multiple Document)') }}</label>
    <div class="upload__box">
      <div class="upload__btn-box">
        <label class="upload__btn">
          {{__('Upload Bills')}}
          <!-- 文件输入字段，multiple 属性允许选择多个文件 -->
          <!-- data-max_length 用于限制文件数量 -->
          <!-- accept 属性定义可接受的文件类型 -->
          <input type="file" multiple id="files" name="files[]" data-max_length="20" class="upload__inputfile" accept="image/jpeg, image/jpg, image/png, application/pdf">
        </label>
      </div>
      <!-- 文件预览区域 -->
      <div class="upload__img-wrap"></div>
    </div>
  </div>
  <!-- 实际应用中可能需要提交按钮 -->
  <!-- <button type="submit">提交</button> -->
</form>

.upload__box {
  padding-top: 10px;
}

/* 隐藏原生文件输入框 */
.upload__inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

/* 自定义上传按钮样式 */
.upload__btn {
  display: inline-block;
  font-weight: 600;
  color: #fff;
  text-align: center;
  min-width: 116px;
  padding: 5px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid;
  background-color: #4045ba;
  border-color: #4045ba;
  border-radius: 10px;
  line-height: 26px;
  font-size: 14px;
}

.upload__btn:hover {
  background-color: unset;
  color: #4045ba;
  transition: all 0.3s ease;
}

.upload__btn-box {
  margin-bottom: 0px;
}

/* 预览图片容器布局 */
.upload__img-wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.upload__img-box {
  width: 200px; /* 每个预览项的宽度 */
  padding: 0 10px;
  margin-bottom: 0px;
}

/* 预览图片上的删除按钮 */
.upload__img-close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 10px;
  right: 10px;
  text-align: center;
  line-height: 24px;
  z-index: 1;
  cursor: pointer;
}

.upload__img-close:after {
  content: '\2716'; /* Unicode 'X' 字符 */
  font-size: 14px;
  color: white;
}

/* 预览图片背景样式 */
.img-bg {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  padding-bottom: 100%; /* 保持图片宽高比 */
}

// 引入jQuery库
// <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$(document).ready(function () {
  ImgUpload(); // 初始化上传功能

  function ImgUpload() {
    var imgWrap = ""; // 存储当前文件输入框对应的预览容器
    var imgArray = []; // 存储所有待上传的文件对象

    // 遍历所有带有 'upload__inputfile' 类的文件输入框
    $('.upload__inputfile').each(function () {
      $(this).on('change', function (e) {
        imgWrap = $(this).closest('.upload__box').find('.upload__img-wrap'); // 获取当前文件输入框的预览容器
        var maxLength = $(this).attr('data-max_length'); // 获取最大允许上传文件数量

        var files = e.target.files; // 获取用户选择的文件列表
        var filesArr = Array.prototype.slice.call(files); // 将 FileList 转换为数组

        filesArr.forEach(function (f) {
          // 检查文件数量是否超出限制
          if (imgArray.length >= maxLength) {
            alert('最多只能上传 ' + maxLength + ' 个文件。');
            return false;
          }

          imgArray.push(f); // 将文件对象添加到待上传数组

          var reader = new FileReader(); // 创建 FileReader 对象用于读取文件内容
          reader.onload = function (e) {
            var html;
            // 根据文件类型生成不同的预览HTML
            if (f.type === 'application/pdf') {
              // PDF文件显示通用图标
              html = "<div class='upload__img-box'><div data-file='" + f.name + "' class='img-bg' ><div class='upload__img-close'></div><img src='https://cdn-icons-png.flaticon.com/128/337/337946.png' alt='PDF'></div></div>";
            } else {
              // 图片文件显示缩略图
              html = "<div class='upload__img-box'><div style='background-image: url(" + e.target.result + ")' data-file='" + f.name + "' class='img-bg'><div class='upload__img-close'></div></div></div>";
            }
            imgWrap.append(html); // 将预览HTML添加到容器中
          };
          reader.readAsDataURL(f); // 以 Data URL 格式读取文件内容，用于图片预览
        });
      });
    });

    // 为动态生成的删除按钮绑定点击事件
    $('body').on('click', ".upload__img-close", function () {
      var fileToRemoveName = $(this).parent().data("file"); // 获取要删除的文件名
      // 从 imgArray 中移除对应的文件对象
      for (var i = 0; i < imgArray.length; i++) {
        if (imgArray[i].name === fileToRemoveName) {
          imgArray.splice(i, 1); // 删除数组中的文件
          break;
        }
      }
      $(this).closest('.upload__img-box').remove(); // 从DOM中移除预览元素
    });
  }
});