本教程详细介绍了如何利用jquery、html和css实现一个功能完善的前端多文件上传组件。该组件支持在单个文件输入字段中选择多个文件（包括图片和pdf），提供实时预览功能，并允许用户在上传前单独删除已选文件，同时可设置最大上传数量，为后端（如laravel）文件处理提供便利的用户体验。
核心功能概述
本教程将引导您构建一个前端文件上传界面，具备以下核心功能：
- 多文件选择： 用户可以通过一个文件输入字段选择多个文件。
- 实时预览： 选定的图片文件将显示缩略图预览，PDF文件则显示通用图标。
- 独立删除： 用户可以针对每个预览文件，在上传前进行单独删除操作。
- 上传数量限制： 可通过配置限制用户一次性选择的文件数量。
- 文件类型过滤： 支持通过 accept 属性和JavaScript进行初步的文件类型过滤。
前端结构 (HTML)
首先，我们需要一个基础的HTML结构来承载文件输入字段和文件预览区域。我们采用一个隐藏的原生文件输入框，并用一个自定义按钮来触发它。
关键点：
- 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代码将隐藏原生的文件输入框，并为自定义按钮和文件预览提供美观的布局。
情感家园企业站5.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%; /* 保持图片宽高比 */
}交互逻辑 (JavaScript/jQuery)
核心功能通过jQuery实现，包括文件选择、预览生成和删除操作。
// 引入jQuery库
//
$(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 = "@@##@@";
} else {
// 图片文件显示缩略图
html = "";
}
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，可以直接用于
标签的 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应用在文件管理方面更加专业和高效。记住，在任何文件上传功能中，前端优化与后端安全验证同样重要。
