在前端开发中,你可能会需要让用户上传多个文件。为了方便用户选择和上传多个文件,我们可以使用 HTML5 提供的 input
元素的 type="file"
属性来实现。
使用 multiple 属性实现多选
默认情况下,<input type="file">
只能选择一个文件进行上传。要想让用户选择并上传多个文件,需要添加 multiple
属性。
<!-- 单选文件 --> <input type="file"> <!-- 多选文件 --> <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