JS 利用 File API 获取图片大小：代码示例与开发注意要点

在 JavaScript 中获取图片大小可以通过 HTML5 的 `File API` 来实现，以下是一个示例代码： ```javascript // 当用户选择文件时触发该函数 function getImageSize() { // 获取文件输入元素 const input = document.getElementById('imageInput'); // 获取用户选择的文件列表 const files = input.files; if (files.length > 0) { // 获取第一个文件（假设只选择了一个图片） const file = files[0]; // 获取文件大小，单位为字节 const sizeInBytes = file.size; // 将文件大小转换为 KB const sizeInKB = sizeInBytes / 1024; console.log(`图片大小: ${sizeInKB.toFixed(2)} KB`); } } ``` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body>  <input type="file" id="imageInput" onchange="getImageSize()"> </body> </html> ``` 上述代码实现了获取图片大小的功能。通过 HTML 中的文件输入元素让用户选择图片，当选择图片后触发 `getImageSize` 函数，在函数中使用 `File API` 获取图片文件，进而得到图片的大小并转换为 KB 单位输出。我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 要考虑到用户可能没有选择任何文件的情况，避免代码因没有文件而报错。 2. 不同浏览器对 `File API` 的支持可能存在差异，需要进行兼容性测试。 3. 当需要处理多个文件时，要正确遍历文件列表，确保每个文件的大小都能被正确获取。 ######[AI写代码神器 | 427点数解答 | 2025-08-13 14:31:32]

服务商

更多选项

快捷项

自定义