使用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')}}
          <!-- 实际的文件输入框，被CSS隐藏 -->
          <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