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

花韻仙語

发布时间：2025-11-22 10:42:53

818人浏览过

来源于php中文网

原创

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

本教程详细介绍了如何利用jquery、html和css实现一个功能完善的前端多文件上传组件。该组件支持在单个文件输入字段中选择多个文件（包括图片和pdf），提供实时预览功能，并允许用户在上传前单独删除已选文件，同时可设置最大上传数量，为后端（如laravel）文件处理提供便利的用户体验。

核心功能概述

本教程将引导您构建一个前端文件上传界面，具备以下核心功能：

多文件选择： 用户可以通过一个文件输入字段选择多个文件。
实时预览： 选定的图片文件将显示缩略图预览，PDF文件则显示通用图标。
独立删除： 用户可以针对每个预览文件，在上传前进行单独删除操作。
上传数量限制： 可通过配置限制用户一次性选择的文件数量。
文件类型过滤： 支持通过 accept 属性和JavaScript进行初步的文件类型过滤。

前端结构 (HTML)

首先，我们需要一个基础的HTML结构来承载文件输入字段和文件预览区域。我们采用一个隐藏的原生文件输入框，并用一个自定义按钮来触发它。

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

关键点：

input type="file" multiple: 允许用户选择多个文件。
name="files[]": 约定后端将以数组形式接收这些文件（例如在Laravel中）。
data-max_length="20": 自定义属性，用于JavaScript限制文件上传数量。
class="upload__inputfile": 用于CSS隐藏原生输入框和JS选择器。
accept="image/jpeg, image/jpg, image/png, application/pdf": 浏览器层面的文件类型过滤，增强用户体验。
upload__img-wrap: 这是一个空的 div，JavaScript会将文件预览动态插入到这里。

样式美化 (CSS)

为了提供更好的用户体验，我们需要对文件上传按钮和预览区域进行样式美化。以下CSS代码将隐藏原生的文件输入框，并为自定义按钮和文件预览提供美观的布局。

Rose.ai

一个云数据平台，帮助用户发现、可视化数据

下载

.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%; /* 保持图片宽高比 */
}

交互逻辑 (JavaScript/jQuery)

核心功能通过jQuery实现，包括文件选择、预览生成和删除操作。

// 引入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中移除预览元素
    });
  }
});

代码解析：

$(document).ready(function () { ImgUpload(); });: 确保DOM加载完成后执行 ImgUpload 函数。
imgArray = []: 全局数组，用于存储所有已选择的文件对象。这个数组最终可以用于通过 AJAX 提交到后端。
文件选择事件 (.upload__inputfile 的 change 事件):
- 获取当前文件输入框对应的预览容器 (imgWrap) 和最大文件数量 (maxLength)。
- 将 e.target.files (FileList对象) 转换为JavaScript数组 filesArr，方便遍历。
- 数量限制： 在添加新文件前检查 imgArray.length 是否已达到 maxLength。
- FileReader： 用于异步读取文件内容。readAsDataURL(f) 将文件内容读取为Data URL，可以直接用于 <img> 标签的 src 属性或CSS的 background-image 属性。
- 预览HTML生成： 根据文件 type 判断是图片还是PDF，生成不同的预览HTML结构。图片直接使用Data URL作为背景图，PDF则使用一个通用图标。
- data-file='${f.name}': 在预览元素的DOM上存储文件名，方便后续删除时识别。
- imgWrap.append(html): 将生成的预览HTML添加到页面中。
文件删除事件 (.upload__img-close 的 click 事件):
- 使用事件委托 ($('body').on('click', ...))，因为预览元素是动态生成的。
- 通过 $(this).parent().data("file") 获取要删除的文件名。
- 遍历 imgArray，找到匹配的文件并使用 splice(i, 1) 从数组中移除。
- $(this).closest('.upload__img-box').remove(): 从DOM中移除整个预览元素。

注意事项

后端处理： 本教程仅关注前端实现。在实际应用中，您需要一个后端服务（如基于Laravel的控制器）来接收这些文件。当表单提交时，name="files[]" 会将所有选中的文件作为数组发送到服务器。您需要在后端遍历这个数组并进行存储、验证等操作。
文件大小限制： 前端代码未包含文件大小验证。您可以在JavaScript中添加逻辑，在 FileReader 读取之前检查 f.size。更重要的是，后端也必须进行严格的文件大小验证，以防止恶意上传。
错误处理： 当前代码没有处理文件读取失败、网络错误等情况。在生产环境中，应增加错误提示和用户反馈机制。
用户体验优化：
- 加载指示器： 在文件读取和预览生成过程中，可以显示加载动画。
- 进度条： 如果文件较大，可以考虑使用AJAX上传并显示上传进度。
- 拖拽上传： 可以进一步扩展功能，支持文件拖拽上传。
安全性： 始终在后端进行所有文件上传的验证（类型、大小、内容），并确保存储在安全的位置，防止目录遍历等攻击。

总结

通过本教程，您已经掌握了如何使用jQuery、HTML和CSS构建一个功能强大的前端多文件上传组件。这个组件提供了友好的用户界面，包括实时预览和删除功能，极大地提升了文件上传的用户体验。它为与后端框架（如Laravel）集成提供了坚实的前端基础，让您的Web应用在文件管理方面更加专业和高效。记住，在任何文件上传功能中，前端优化与后端安全验证同样重要。

修复 clientHeight 在窗口缩放时无法正确响应高度变化的问题

HTML 文件分离时 collapsible 无法折叠的解决方案

如何正确协调 mouseDown/mouseUp 与 hover 交互效果

如何正确协调鼠标按下、释放与悬停事件的样式优先级

如何正确协调鼠标按下、释放与悬停事件以避免样式冲突