构建多文件上传与实时预览组件：基于 jQuery、HTML 和 CSS

<form action="" method="POST" enctype="multipart/form-data">
  <div class="col-lg-12 mt-4">
    <label for="files">上传文件 (支持多文件上传)</label>
    <div class="upload__box">
      <div class="upload__btn-box">
        <label class="upload__btn">
          选择文件
          <!-- 核心文件输入框 -->
          <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>

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

<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 {
  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'; /* 叉号图标 */
  font-size: 14px;
  color: white;
}

.img-bg {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  padding-bottom: 100%; /* 保持正方形比例 */
}
</style>

<script>
$(document).ready(function () {
  ImgUpload();

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

    // 监听所有具有 'upload__inputfile' 类的文件输入框的 'change' 事件
    $('.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 = "";
            if (f.type === 'application/pdf') {
              // 对于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 document' style='max-width: 100%; max-height: 100%; object-fit: contain; position: absolute; top: 0; left: 0;'></div></div>";
            } else if (f.type.match('image.*')) {
              // 对于图片文件，将文件内容作为背景图显示
              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>";
            } else {
              // 对于其他未知文件类型，显示一个通用文档图标
              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