使用jQuery实现多文件上传预览与删除功能：前端交互式解决方案

技术教程
2025-11-22 15:26:01

使用jquery实现多文件上传预览与删除功能：前端交互式解决方案

本教程详细介绍了如何利用jQuery实现一个功能完善的多文件上传组件，支持图片和PDF文件的即时预览，并提供便捷的单个文件删除功能。通过HTML5的input[type="file"]、FileReader API以及CSS美化，用户可以在文件上传前直观管理待上传文件，极大地提升了用户体验。此方案为后端（如Lar*el）的文件处理提供了清晰的前端数据准备。

核心技术概览

实现交互式多文件上传预览与删除功能，主要依赖以下前端技术：

HTML5 : 这是基础，允许用户一次性选择多个文件。
FileReader API: 浏览器内置接口，用于异步读取用户本地文件内容。我们利用它将文件读取为Data URL，以便在前端生成预览。
jQuery: 简化DOM操作、事件绑定和AJAX请求（尽管本教程侧重前端，但jQuery是常用工具）。
CSS3: 用于美化上传按钮和文件预览区域，提供直观的用户界面。

HTML 结构设计

首先，我们需要构建基础的HTML结构，包括一个用于触发文件选择的自定义按钮（通过label关联隐藏的input[type="file"]），以及一个用于显示文件预览的容器。

VoxDeck

美间AI推出的演示文稿制作智能体

90 查看详情 VoxDeck

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

关键点解析：

input type="file" multiple: 核心属性，允许用户选择多个文件。
id="files" 和 name="files[]": id用于label关联，name="files[]"在表单提交时会将所有选中的文件作为数组发送到服务器。
data-max_length="20": 一个自定义数据属性，用于在J*aScript中限制用户最多可以选择的文件数量。
class="upload__inputfile": 这个类名将用于CSS中隐藏原始的文件输入框。
accept="image/jpeg, image/jpg, image/png, application/pdf": 限制用户只能选择指定的图片格式和PDF文件，提升用户体验并减少无效文件上传。
upload__img-wrap: 这个div是动态生成的文件预览元素的容器。

CSS 样式美化

为了隐藏原生文件输入框并提供更友好的上传按钮和文件预览界面，我们需要应用一系列CSS样式。

<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