使用 jQuery 实现多文件（图片与PDF）上传预览及删除功能

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

<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>
</form>

<style>
.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 {
  /* 预览区域的 flex 布局 */
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px; /* 负边距抵消内部元素的 padding */
}

.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 {
  /* 删除按钮的 'x' 符号 */
  content: '\2716';
  font-size: 14px;
  color: white;
}

.img-bg {
  /* 预览图片的背景样式，用于显示图片缩略图或PDF占位图 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  padding-bottom: 100%; /* 保持正方形比例 */
}
</style>

$(document).ready(function () {
  ImgUpload(); // 页面加载完成后调用初始化函数

  function ImgUpload() {
    var imgArray = []; // 用于存储已选择文件的数组

    // 监听所有 .upload__inputfile 元素的 change 事件
    $('.upload__inputfile').each(function () {
      $(this).on('change', function (e) {
        var 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, index) {
          // 检查文件数量是否超过限制
          if (imgArray.length >= maxLength) {
            alert('最多只能上传 ' + maxLength + ' 个文件。');
            return false;
          } else {
            imgArray.push(f); // 将文件添加到文件数组中

            var reader = new FileReader(); // 创建 FileReader 对象
            reader.onload = function (e) {
              var html = "";
              // 根据文件类型生成不同的预览HTML
              if (f.type === 'application/pdf') {
                // PDF 文件预览：显示一个PDF图标作为占位符
                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>" +
                           "<img src='https://cdn-icons-png.flaticon.com/128/337/337946.png' alt='PDF Icon' style='width: 100%; height: 100%; object-fit: contain; padding: 10px;'>" +
                         "</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
          }
        });
      });
    });

    // 监听 .upload__img-close 元素的点击事件，实现文件删除
    $('body').on('click', ".upload__img-close", function (e) {
      var fileToRemove = $(this).parent().data("file"); // 获取要删除的文件名
      // 从 imgArray 中移除对应文件
      for (var i = 0; i < imgArray.length; i++) {
        if (imgArray[i] && imgArray[i].name === fileToRemove) {
          imgArray.splice(i, 1); // 移除数组中的文件
          break;
        }
      }
      $(this).parent().parent().remove(); // 从DOM中移除预览元素
    });
  }
});