Question

无法获取尺寸-高度和宽度：结果始终为“未定义”。我显然不明白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”为整数值。

请需要帮助。

Answer 1

可能是在您要求图像高度时尚未完全渲染图像，因此请在onload事件之后设置宽度和高度：

tmppath.onload=function() {
    tempWysokosc = tmppath.height;
    tempSzerokosc = tmppath.width;
}

相似的答案：Can't get height and width of image in javascript

Answer 2

在您的代码tmppath中是URL.createObjectURL()的结果，即一个字符串。
该字符串显然没有width或height。您想要的是从已加载的<img>元素中检索这些值，该元素的src将设置为tmppath。但是此过程始终是异步的，因此您可能需要重构代码以包含这种异步性：

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>

请注意，如果您要检索很多此类图像的尺寸，您可能会对this Q/A感兴趣，它提供了一种直接读取文件的方法，避免了解码图像的巨大开销。

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

2 个答案: