时间戳

首页 > 解决方案 > Javascript - 图像尺寸形成多个文件输入

javascript - Javascript - 图像尺寸形成多个文件输入

问题描述

无法获得尺寸 - 高度和宽度：结果始终是“未定义”。我显然不明白 JavaScript 在这里是如何工作的。但是，我能够显示该文件。

PHP 文件包含以下输入标签，用于选择多张图片：

$output = "<input class=\"wpisNazwyWkladow\" 
id=\"wpis_tabela_zdjecie_wybieracz\" type=\"file\" multiple 
name=\"ads_photofile\">";

这是有问题的 JavaScript 脚本：

var input = $(this); // works
var ilosc = input[0].files.length;
var pliki = input[0].files;

for (var i = 0; i < ilosc; i++)
{
   var tmppath = URL.createObjectURL(pliki[i]); // works - displays
   var nazwa = pliki[i].name; // works
   var tempRozmiar = pliki[i].size; // works
   var typ = pliki[i].type; // typ fotki // works

   // The part that does not work:
   tempWysokosc = tmppath.height;
   tempSzerokosc = tmppath.width;

}

我期待“tempWysokosc”和“tempSzerokosc”的整数值。

请需要帮助。

标签： javascripthtml

解决方案

在您的代码tmppath中是 的结果URL.createObjectURL()，即一个字符串。
这个字符串显然没有 awidth也没有height。您想要的是从将设置为的已加载<img>元素中检索这些值。但是这个过程总是异步的，所以你可能需要重构你的代码来接受这种异步性：srctmppath

input.oninput = e => {
const ilosc = input.files.length;
const pliki = input.files;

for (let i = 0; i < ilosc; i++)
{
   const tmppath = URL.createObjectURL(pliki[i]); // works - displays
   const nazwa = pliki[i].name; // works
   const tempRozmiar = pliki[i].size; // works
   const typ = pliki[i].type; // typ fotki // works
   
   const img = new Image();
   // async
   img.onload = e => {
    const tempWysokosc = img.height;
    const tempSzerokosc = img.width;
    console.log({
      name: nazwa,
      size: tempRozmiar,
      type: typ,
      width: tempWysokosc,
      height: tempSzerokosc
    });
   };
   img.src = tmppath;
  }

}
<input id="input" type="file" accept="image/*" multiple>

请注意，如果您有很多这样的图像要检索其尺寸，您可能会对这个 Q/A感兴趣，它公开了一种通过直接读取文件来获取图像的方法，从而避免了解码图像的巨大开销。

推荐阅读