使用 实现文件选择框，添加 multiple 属性支持多文件选择，通过 accept 属性限制文件类型，如 accept="image/*" 或 accept=".png,.jpg"；2. 利用 javascript 的 formdata 和 fetch api 处理文件上传，结合 filereader api 实现图片预览；3. 通过隐藏默认输入框并绑定点击事件到自定义按钮来自定义样式；4. 在客户端使用 file.size 检查文件大小是否超限，但必须在服务器端进行二次验证以确保安全。
HTML 表单中的文件选择框，允许用户从本地文件系统中选择一个或多个文件，以便上传到服务器。实现的关键在于 标签。
文件选择器实现
是 HTML 中创建文件选择框的核心。 默认情况下，它允许用户选择单个文件。
立即学习“前端免费学习笔记（深入）”；
多文件选择:
若要允许用户选择多个文件，需要添加 multiple 属性。
限制文件类型:
accept 属性可以用来限制用户可以选择的文件类型。 例如，只允许选择图片文件：
accept 属性可以使用 MIME 类型或文件扩展名。 例如，accept="image/png, image/jpeg" 或 accept=".png, .jpg, .jpeg"。
JavaScript 处理:
虽然 HTML 提供了文件选择框，但通常需要 JavaScript 来处理用户选择的文件。 例如，可以在表单提交之前预览图片，或者上传文件到服务器。
安全性考虑:
需要注意，客户端的文件类型限制可以通过修改文件扩展名绕过。 因此，服务器端必须进行严格的文件类型验证和安全检查，以防止恶意文件上传。
如何自定义文件选择按钮的样式？
默认的文件选择按钮样式比较简陋，不同浏览器之间也存在差异。 自定义样式通常涉及隐藏默认的 元素，并使用一个自定义的按钮来触发文件选择对话框。
这个例子中，.custom-file-upload 是自定义的按钮样式，#fileElem 是隐藏的文件选择框。 点击自定义按钮会触发文件选择框的点击事件，从而打开文件选择对话框。 handleFiles 函数处理用户选择的文件。
如何预览用户选择的图片？
在用户选择图片后，可以立即预览，提供更好的用户体验。 这需要使用 FileReader API。
@@##@@
这段代码监听 imageInput 的 change 事件。 当用户选择文件后，创建一个 FileReader 对象，使用 readAsDataURL 方法读取文件内容，并将其设置为 imagePreview 的 src 属性。
如何限制上传文件的大小？
在客户端限制文件大小可以减少不必要的服务器负载。 但请注意，客户端的限制可以被绕过，因此服务器端也必须进行文件大小验证。
这段代码检查用户选择的文件大小是否超过 2MB。 如果超过，则显示警告信息，并清空文件选择。 file.size 属性返回文件大小，单位是字节。
