本教程详细介绍了如何利用 html、css 和 jquery 构建一个功能完善的多文件上传组件。该组件支持用户选择多个图片或 pdf 文件，并在上传前实时生成预览图，同时提供便捷的移除功能，以优化用户体验。
1. 概述
在现代Web应用中，文件上传是一个常见且重要的功能。为了提升用户体验，通常需要实现多文件选择、上传前预览以及方便的移除功能。本教程将指导您如何利用前端技术栈——HTML构建结构，CSS进行样式美化，以及jQuery实现核心的交互逻辑，从而创建一个支持图片和PDF文件预览的上传组件。
2. HTML 结构设计
首先，我们需要定义文件上传组件的HTML骨架。这包括一个隐藏的input元素用于文件选择，一个自定义的上传按钮，以及一个用于显示文件预览的容器。
关键点说明：
- input type="file" multiple="": 允许用户选择多个文件。
- id="files" 和 name="files[]": id用于JavaScript操作，name数组形式files[]在后端接收多个文件时非常有用（例如在Laravel中）。
- data-max_length="20": 自定义属性，用于客户端限制最大文件上传数量。
- class="upload__inputfile": 用于CSS隐藏原生文件输入框。
- accept="image/jpeg, image/jpg, image/png, application/pdf": 限制用户只能选择JPEG、JPG、PNG图片和PDF文件。
- upload__img-wrap: 这个div将作为所有文件预览的容器。
3. CSS 样式美化
为了提供更好的用户体验，我们需要对默认的文件上传样式进行定制。这包括隐藏原生的文件输入框，设计一个美观的上传按钮，以及布局文件预览区域和移除按钮。
立即学习“前端免费学习笔记（深入）”；
样式说明：
- upload__inputfile: 设置opacity: 0, width: 0.1px, height: 0.1px, position: absolute, z-index: -1来完全隐藏原生文件输入框，但使其仍然可点击。
- upload__btn: 将label元素样式化为自定义的上传按钮。
- upload__img-wrap: 使用display: flex和flex-wrap: wrap来布局预览图片，使其可以多行显示。
- upload__img-box: 定义每个预览项的宽度和内边距。
- upload__img-close: 创建一个圆形半透明的关闭按钮，通过position: absolute定位在预览图的右上角，并使用::after伪元素添加一个叉号图标。
- img-bg: 用于作为图片预览的背景，通过background-size: cover确保图片填充整个区域，padding-bottom: 100%结合position: relative创建了一个宽高相等的容器。
4. JavaScript 核心逻辑 (jQuery)
JavaScript部分负责处理文件的选择、读取、预览生成以及移除功能。我们将使用jQuery来简化DOM操作和事件处理。
