在前端开发中，你可能会需要让用户上传多个文件。为了方便用户选择和上传多个文件，我们可以使用 HTML5 提供的 input 元素的 type="file" 属性来实现。
使用 multiple 属性实现多选
默认情况下，<input type="file"> 只能选择一个文件进行上传。要想让用户选择并上传多个文件，需要添加 multiple 属性。
---- ---- --- ------ ------------ ---- ---- --- ------ ----------- ---------
添加 multiple 属性后，用户就可以用类似于按住 Ctrl 或 Shift 键的方式，一次性选择多个文件进行上传了。
获取文件信息
上传文件之前，我们通常需要获取选中的文件信息。为此，我们可以监听 change 事件，并使用 FileList 对象来获取选中的文件列表。
------ ---------- ----------- ---------
--------
----- ----- - ---------------------------------
-------------------------------- --------------- -
----- -------- - -------------------
--- ---- - - -- - - ---------------- ---- -
-------------- --- - -- ---------------------------
-------------- --- - -- ------------------------- -----
-------------- --- - -- ----------------------------
-
---
---------在这个示例中，我们使用 event.target.files 来获取选中的文件列表，并逐个打印出每个文件的名称、大小和类型等信息。
上传文件
最后，我们需要将选中的多个文件上传到服务器。对于如何实现文件上传，由于涉及到多个方面（如后端处理），这里不再赘述。你可以参考这篇文章学习如何使用 JavaScript 发送 AJAX 请求上传文件。
----- ------------
------ ---------- ----------- ---------
------- -------------------------
-------
--------
----- ---- - ----------------------------------
------------------------------- --------------- -
-----------------------
----- -------- - --- -----------
----- -------- - ---------------------------------------
--- ---- - - -- - - ---------------- ---- -
------------------------ -------------
-
-- ----- -- ---- -- -------- --------
---
---------在这个示例中，我们创建了一个表单，并监听了 submit 事件，在事件处理函数中组装了一个 FormData 对象，将选中的多个文件都添加到了该对象中。接下来，我们可以使用 AJAX 技术将 formData 发送到服务器进行上传。
以上就是使用“输入类型”“文件”来选择多个文件的详细介绍和指导意义。希望对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/24311