如何使用 HTML5 和 JavaScript 在上传之前预览文件大小、图像尺寸？

使用 HTML5 和 JavaScript 上传之前预览文件元数据

问题：

如何获取文件大小、图像使用 jQuery 或将文件上传到您的网站之前的宽度和高度JavaScript？

解决方案：

利用 HTML5 的文件 API，您可以在文件上传之前获取以下信息：

文件大小：

• 通过 file.size 属性，返回文件大小（以字节为单位）。

图像宽度和高度：

• 对于图像，您可以使用 URL API 创建临时 URL图像 blob 并将其加载到临时图像元素中。
• 图像加载后，您可以在撤销之前访问其宽度和高度属性对象 URL 以释放内存。

使用 URL API 的示例：

下面的代码片段演示了如何使用 URL API 预览图像元数据：

const readImage = file => {
  if (!(/^image\/(png|jpe?g|gif)$/).test(file.type))
    return EL_preview.insertAdjacentHTML('beforeend', `Unsupported format ${file.type}: ${file.name}<br>`);

  const img = new Image();
  img.addEventListener('load', () => {
    EL_preview.appendChild(img);
    EL_preview.insertAdjacentHTML('beforeend', `<div>${file.name} ${img.width}×${img.height} ${file.type} ${Math.round(file.size / 1024)}KB<div>`);
    window.URL.revokeObjectURL(img.src); // Free some memory
  });
  img.src = window.URL.createObjectURL(file);
};

EL_browse.addEventListener('change', ev => {
  EL_preview.innerHTML = ''; // Remove old images and data
  const files = ev.target.files;
  if (!files || !files[0]) return alert('File upload not supported');
  [...files].forEach(readImage);
});</div>
</div>

以上是如何使用 HTML5 和 JavaScript 在上传之前预览文件大小、图像尺寸？的详细内容。更多信息请关注PHP中文网其他相关文章！