HTML5系列代码：遍历FileList对象

时间: 2024-12-18 11:11:26 浏览: 3

html5表单上传控件Files API

html5文件系统，很全面。而文件对象则拥有下列的属性： name – 文件名（不包含路径） type – 文件的MIME类型（小写） size – 文件的尺寸（单位为字节） lastModifiedDate 为上传文件的最后修改时间 xhr.setRequestHeader("Content-Type", "multipart/form-data"); xhr.setRequestHeader("X-File-Name", file.name); xhr.setRequestHeader("X-File-Size", file.size); xhr.setRequestHeader("X-File-Type", file.type); ### HTML5 表单上传控件 Files API 随着HTML5的发展和普及，Web开发者们能够利用更为丰富的功能来提升用户体验并简化开发流程。在文件上传领域，Files API 的出现极大地改进了传统表单提交的方式，提供了更多的灵活性和控制权。 #### 1. 文件上传控件 `<input type="file">` 在HTML5中，`<input type="file">` 元素允许用户从本地文件系统选择文件。为了实现更高级的功能，如多文件上传和文件类型限制，可以通过添加不同的属性来进行定制。 - **允许上传文件数量** - **多个文件**：通过添加 `multiple` 属性，允许用户选择多个文件。例如：`<input type="file" multiple>`。 - **单个文件**：若要限制用户只能选择一个文件，则省略 `multiple` 属性即可。例如：`<input type="file">`。 - **上传指定的文件格式** 通过使用 `accept` 属性，可以限定用户可以选择的文件类型。例如，若只允许用户上传 `.gif` 和 `.png` 格式的图像文件，则可以这样设置：`<input type="file" accept="image/gif, image/png">`。需要注意的是，`accept` 属性仅在打开文件选择对话框时起作用，用户仍然可以手动更改文件类型。若不希望对文件类型有任何限制，可以设置为 `accept="image/*"` 来接受所有图像文件格式。 #### 2. FileList 上传文件数组当用户选择了文件后，所选文件将以 `FileList` 对象的形式返回。这个对象包含了所选文件的集合，每个文件都是 `File` 类型的对象，具有如下属性： - **name**：文件名（不包括路径）。 - **type**：文件的 MIME 类型（小写形式），如 `image/jpeg`。 - **size**：文件的大小（以字节为单位）。 - **lastModifiedDate**：文件最后一次被修改的日期和时间。示例代码展示了如何使用 XMLHttpRequest 设置文件的相关信息： ```javascript xhr.setRequestHeader("Content-Type", "multipart/form-data"); xhr.setRequestHeader("X-File-Name", file.name); xhr.setRequestHeader("X-File-Size", file.size); xhr.setRequestHeader("X-File-Type", file.type); ``` #### 3. Cordova 文件对象属性对于使用 Cordova 开发的应用程序来说，文件对象还具有以下额外的属性： - **name**：文件的名称。 - **fullPath**：文件的完整路径，包括文件名称。 - **type**：文件的 MIME 类型。 - **lastModifiedDate**：文件最后一次被修改的时间。 - **size**：文件的大小（以字节为单位）。 #### 4. HTML5 File API HTML5 的 File API 提供了一组用于处理文件的 JavaScript 接口。主要包括以下几个核心接口： - **FileList 接口**：表示一组文件的集合，例如用户通过 `<input type="file">` 元素选择的本地文件列表。 - **Blob 接口**：表示一段二进制数据，允许以字节为单位对数据进行操作。 - **File 接口**：继承自 Blob 接口，用于表示一个具体的文件，并提供了文件名、MIME 类型等额外信息。 - **FileReader 接口**：提供读取文件的方法和相关的事件监听机制。 **注意细节**： - 使用 `<input type="file">` 元素时，默认情况下允许用户选择多个文件，因此返回的是 FileList 对象。 - Blob 和 File 接口提供了文件的基本信息，如大小、MIME 类型等，但无法直接访问文件内容。这需要使用 FileReader 接口以异步方式读取文件内容。 #### 5. 拖动上传 HTML5 还引入了拖放 (Drag and Drop) API，允许用户直接将文件拖放到网页上。这一特性可以通过 `dataTransfer` 对象来实现，它提供了多种属性和方法来控制拖放行为。 - **`dropEffect`**：设置或获取拖拽操作的类型和要显示的光标类型。例如，`copy`、`link` 或 `move`。 - **`effectAllowed`**：设置或获取数据传送操作可应用于该对象的源元素的操作类型。例如，`copy` 或 `link`。 ### 总结通过了解 HTML5 中 Files API 的工作原理以及如何使用相关的 JavaScript 接口，开发者可以构建出更加高效和用户友好的文件上传体验。无论是通过 `<input type="file">` 控件还是拖放功能，都能有效地控制文件的选择、验证和上传过程，从而提高应用程序的整体性能和安全性。

HTML5 引入了 File API，使得网页可以处理文件。FileList 对象是一个类数组对象，包含了用户通过 `<input type="file">` 元素选择的文件列表。遍历 FileList 对象通常用于处理多个文件上传的情况。以下是一个简单的示例代码，展示了如何遍历 FileList 对象： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>遍历 FileList 对象</title> </head> <body> <input type="file" id="fileInput" multiple> <ul id="fileList"></ul> <script> document.getElementById('fileInput').addEventListener('change', function(event) { const fileList = event.target.files; // 获取 FileList 对象 const output = document.getElementById('fileList'); output.innerHTML = ''; // 清空之前的内容 for (let i = 0; i < fileList.length; i++) { const file = fileList[i]; const listItem = document.createElement('li'); listItem.textContent = `文件名: ${file.name}, 大小: ${file.size} bytes`; output.appendChild(listItem); } }); </script> </body> </html> ``` 在这个示例中： 1. 我们创建了一个带有 `multiple` 属性的 `<input type="file">` 元素，允许用户选择多个文件。 2. 当用户选择文件时，会触发 `change` 事件，并执行相应的回调函数。 3. 在回调函数中，我们获取到 `FileList` 对象，并遍历其中的每个文件。 4. 对于每个文件，我们创建一个列表项 (`<li>`)，显示文件的名称和大小，并将其添加到页面上的 `<ul>` 元素中。这样，用户选择的文件信息就会显示在网页上。

阅读全文

HTML5系列代码：遍历FileList对象

相关推荐

HTML5拖拽上传图片实战展示：兼容与扩展实例

HTML5表单验证：checkValidity()方法解析

common-fileupload实例：fileList = upload.parseRequest(request);上传file文件和form表单提交

js+FSO遍历文件夹下文件并显示.docx

HTML5多文件预览上传特效代码

dragupdata:html5拖拽上传

用原生JS实现的多张图片上传及预览功能（兼容IE8）（HTML+CSS+JS代码）

【JavaScript源代码】vue实现桌面向网页拖动文件的示例代码(可显示图片音频视频).docx

多图预览主要代码

html5文件夹上传

vue上传图片组件编写代码

jQuery文件上传显示大小代码

html5拖拽上传文件

上传文件代码源码 网页上传源码

jQueryr多张图片批量上传代码

jQuery支持图片预览上传特效代码

Html5上传图片前本地预览

HTML5实现图片上传：单张与多张功能详解

html遍历文件夹并输出，linux

最新推荐

白色大气风格的商务团队公司模板下载.zip

vb+access学生学籍管理系统(系统+论文+摘要与目录+实习报告)(2024p5).7z

VB+access药品供销存贮系统(系统+封面+开题报告+论文+任务书+答辩PPT+外文文献+中文翻译)(2024d0).7z

白色大气风格的手机电脑商城模板下载.zip

SecureCRT-9.6.0-mac

Windows平台下的Fastboot工具使用指南

管理建模和仿真的文件

DLMS规约深度剖析：从基础到电力通信标准的全面掌握

修改代码，使其正确运行

Python机器学习基础入门与项目实践

上传文件代码源码网页上传源码