本教程详细介绍了如何使用 HTML、CSS 和 jQuery 构建一个用户友好的多文件上传界面。该界面支持实时预览图片和 PDF 文件，并允许用户在上传前删除不需要的文件，同时兼顾了前端交互逻辑和样式设计，为后端文件处理奠定了基础。
在现代 Web 应用中，用户上传多个文件（如图片、文档）并能实时预览和管理这些文件是常见的需求。本教程将指导您如何利用 jQuery 实现一个功能完善的多文件上传组件，该组件不仅提供文件预览，还允许用户在提交前删除已选择的文件，提升用户体验。
核心功能概览
我们将构建的组件具备以下核心功能：
- 多文件选择：通过一个隐藏的 元素实现。
- 实时预览：当用户选择文件后，立即在页面上显示图片的缩略图或 PDF 文件的通用图标。
- 文件类型支持：支持常见的图片格式（JPEG, JPG, PNG）和 PDF 文件。
- 文件删除：每个预览项都带有一个删除按钮，允许用户移除不需要的文件。
- 文件数量限制：通过 data-max_length 属性控制最大可上传文件数量。
1. HTML 结构
首先，我们需要定义页面的基本 HTML 结构，包括上传按钮和用于显示文件预览的容器。
结构说明：
- upload__box：整个上传区域的容器。
- upload__btn-box：包含上传按钮的容器。
- upload__btn：自定义的上传按钮样式，通过 label 标签关联到隐藏的 input。
- upload__inputfile：实际的文件输入框。
- multiple=""：允许选择多个文件。
- id="files" 和 name="files[]"：用于后端接收文件数组。
- data-max_length="20"：自定义属性，用于前端限制最大上传文件数量。
- accept="image/jpeg, image/jpg, image/png, application/pdf"：限制可选的文件类型。
- upload__img-wrap：用于显示文件预览的容器。
2. CSS 样式
为了美化上传界面并隐藏原生文件输入框，我们需要添加一些 CSS 样式。
样式说明：
- upload__inputfile：设置为 opacity: 0 和 position: absolute 来隐藏原生文件输入框，并通过 label 触发其点击事件。
- upload__btn：自定义了上传按钮的样式，使其看起来更友好。
- upload__img-wrap：使用 Flexbox 布局来排列预览图片。
- upload__img-box：每个文件预览项的容器。
- img-bg：用于显示图片预览的背景，通过 padding-bottom: 100% 技巧创建响应式的正方形区域。
- upload__img-close：预览图片上的删除按钮样式。
3. JavaScript 逻辑 (jQuery)
核心功能将通过 jQuery 实现，包括文件选择监听、预览生成和文件删除。
网趣网上购物系统支持PC电脑版+手机版+APP，数据一站式更新，支持微信支付与支付宝支付接口，是专业的网上商城系统，网趣商城系统支持淘宝数据包导入，实现与淘宝同步更新!支持上传图片水印设置、图片批量上传功能，同时支持订单二次编辑以及多级分类隐藏等实用功能，新版增加商品大图浏览与列表显示功能，使分类浏览更方便，支持最新的支付宝即时到帐接口。
JavaScript 逻辑说明：
- $(document).ready(function () { ImgUpload(); });: 页面加载完成后调用 ImgUpload 函数初始化功能。
-
ImgUpload() 函数:
- imgArray = []：一个全局数组，用于存储用户选择的所有 File 对象。这个数组最终可以用于通过 AJAX 发送到后端。
-
文件选择监听 (.upload__inputfile').on('change', ...):
- 获取 data-max_length 属性来限制文件数量。
- e.target.files 获取用户选择的文件列表。
- 将 FileList 转换为数组 filesArr，方便遍历。
- 遍历 filesArr 中的每个文件：
- 文件数量检查：在添加新文件前，检查 imgArray.length 是否已达到 maxLength。
- imgArray.push(f)：将当前文件对象添加到 imgArray。
-
FileReader：用于异步读取文件内容。
- reader.onload：当文件读取完成后触发。
- 根据 f.type 判断文件类型：
- 如果是 application/pdf，则显示一个预设的 PDF 图标。
- 否则（假定是图片），将 e.target.result (Data URL) 作为背景图片显示。
- 生成的 HTML 包含一个 data-file 属性，存储文件名，用于后续删除操作。
- imgWrap.append(html)：将生成的预览 HTML 添加到页面。
- reader.readAsDataURL(f)：开始读取文件内容。
- $(this).val('')：清空文件输入框的值，这样即使再次选择相同的文件，change 事件也能被触发。
-
文件删除监听 ($('body').on('click', ".upload__img-close", ...)):
- 使用事件委托 ($('body').on(...)) 来监听动态生成的删除按钮的点击事件。
- $(this).parent().data("file")：获取要删除的文件名。
- 遍历 imgArray，找到匹配文件名的文件并使用 splice 移除。
- $(this).parent().parent().remove()：从 DOM 中移除对应的预览元素。
4. 注意事项
-
后端处理: 本教程主要关注前端交互。当用户最终提交表单时，您需要通过 AJAX 将 imgArray 中的文件发送到后端（例如 Laravel）。在 Laravel 中，您可以通过 FormData 对象来处理文件上传。
// 示例：使用 FormData 和 AJAX 发送文件 var formData = new FormData(); for (var i = 0; i < imgArray.length; i++) { formData.append('files[]', imgArray[i]); } // 假设您还有其他表单数据 // formData.append('other_field', $('#other_field_id').val()); $.ajax({ url: '/upload-endpoint', // 您的后端上传接口 type: 'POST', data: formData, processData: false, // 告诉 jQuery 不要处理数据 contentType: false, // 告诉 jQuery 不要设置 Content-Type 请求头 success: function(response) { console.log('上传成功', response); // 处理成功后的逻辑 }, error: function(xhr, status, error) { console.error('上传失败', error); // 处理失败后的逻辑 } }); -
文件类型与大小验证:
- 前端的 accept 属性和 JavaScript 检查只是初步的用户体验优化，绝不能替代后端验证。后端必须对文件类型、大小、数量进行严格验证，以防止恶意文件上传和服务器资源滥用。
- 您可以在 FileReader 之前添加更多 JavaScript 验证，例如检查文件大小。
-
用户体验:
- 考虑添加上传进度条或加载指示器，尤其是在文件较大或网络较慢的情况下。
- 对错误情况（如上传失败、文件类型不匹配）提供清晰的用户反馈。
安全性: 永远不要相信来自前端的数据。所有文件上传都必须在后端进行严格的验证和安全检查。
总结
通过结合 HTML 结构、CSS 样式和 jQuery 提供的强大 DOM 操作能力，我们成功构建了一个功能丰富且用户友好的多文件上传组件。这个组件不仅提供了实时预览和删除功能，还通过 imgArray 有效地管理了待上传的文件，为后续的后端集成奠定了坚实的基础。您可以根据自己的项目需求进一步扩展和优化此组件，例如添加拖拽上传、进度显示等高级功能。
