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

---

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

核心功能概述

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

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

前端结构 (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[]": 约定后端将以数组形式接收这些文件（例如在Lar*el中）。
• data-max_length="20": 自定义属性，用于J*aScript限制文件上传数量。
• class="upload__inputfile": 用于CSS隐藏原生输入框和JS选择器。
• accept="image/jpeg, image/jpg, image/png, application/pdf": 浏览器层面的文件类型过滤，增强用户体验。
• upload__img-wrap: 这是一个空的 div，J*aScript会将文件预览动态插入到这里。

样式美化 (CSS)

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

情感家园企业站5.0 多语言多风格版

一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！

0 查看详情

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

交互逻辑 (J*aScript/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>@@##@@</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中移除预览元素
    });
  }
});

代码解析：

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

注意事项

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

总结

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

以上就是使用jQuery实现多文件上传、实时预览及删除功能教程的详细内容，更多请关注其它相关文章！

# 遍历  # 益阳网站建设优化排名  # 新书的推广和营销  # 佛山百度网站快速优化  # 西安市seo排名费用  # 抚顺seo公司招商加盟  # sem seo软件  # 菏泽本地网络营销推广  # 如何推广处方药的营销  # 周口抖音seo哪家好  # 桂林seo新站优化  # 如何使用  # 多语言  # 移除  # 自定义  # 多个  # css  # 输入框  # 后端  # 文件上传  # 上传  # 后  # app  # 浏览器  # ajax  # 前端  # js  # html  # jquery  # java  # laravel  # javascript 

相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】

相关推荐： Pydantic 中“schema”字段命名冲突的解决方案  J*aScript：从子元素中批量移除特定CSS类  德邦快递查询入口登录官网 德邦快递单号查询系统入口  《知到》打卡课程方法  《U校园》学生登录入口2025  Go语言中方法与接收器：指针和值类型的调用机制详解  《宝可梦大集结》S4冠军之路开始时间介绍  喜茶GO更换登录账号方法  如何用mysql实现客户反馈管理_mysql客户反馈数据库方法  PHP utf8_encode 字符编码转换陷阱与解决方案  在XML中嵌入二进制数据（如图片）的最佳实践是什么？ Base64编码与解析注意事项  邮编号码查询app有哪些_邮编号码查询推荐app及使用体验  J*aScript模块加载器_RequireJS原理分析  Highcharts雷达图径向轴数值标签实现教程  Fedora怎么安装 Fedora Workstation安装步骤  告别繁琐SEO！如何使用SyliusSitemap插件自动化生成网站地图，提升搜索引擎排名  极兔快递官网查询入口手机版 手机极兔快递登录查询入口官方  金牛福袋获取攻略  漫蛙漫画直连入口 _ manwa官方备用入口实时检测  Win11便笺在哪打开 Win11桌面便笺（Sticky Notes）使用方法【详解】  小红书网页版怎么进 小红书网页版通用入口  嘀嗒顺风车如何开具电子发票  mysql如何限制远程访问_mysql远程访问限制方法  Linux如何开发轻量级数据服务模块_Linux服务化设计  邮政快递寄件查询入口 邮政快递收件查询入口  WooCommerce 新客户订单自动添加管理员备注教程  外卖小程序对接第三方配送  QQ邮箱手机版网页版 QQ邮箱登录入口地址  《小黑盒》删除历史浏览方法  教资成绩怎么查询  Python模块化编程：避免循环导入与共享函数的最佳实践  掌握CSS :has() 选择器：父选择器、嵌套限制与常见陷阱解析  C++怎么解决数值计算中的精度问题_C++浮点数误差与数值稳定性分析  Git命令与VS Code UI操作的对应关系解析  泰拉瑞亚网页版在线登录入口 泰拉瑞亚官方正版入口  msn官方入口2025登录 msn官网2025直达首页入口  抖音火山版如何进行提现  QQ邮箱官方登录页_腾讯出品安全稳定的邮箱服务  汽水音乐车机版 汽水音乐车机版官方入口  Python中深度嵌套字典与列表的数据提取与条件过滤指南  《oppo商城》维修服务位置  《顺丰同城骑士》查看我的技能方法  如何自定义苹果手机铃声  吃完饭就犯困是什么原因 餐后嗜睡如何缓解  抖音如何解除|直播|权限绑定_抖音关闭并解绑|直播|功能的方法  b站怎么设置动态仅粉丝可见_b站动态粉丝可见设置方法  猫眼电影app如何筛选支持退改签的影院_猫眼电影退改签影院筛选方法  顺丰快递收费标准查询_如何查看顺丰最新收费价格  优化长HTML属性值：SonarQube警告与实用策略  咸鱼怎么设置仅粉丝可见的动态_咸鱼动态粉丝可见设置方法 

 2025-11-22