blocks|key|3766771|text|当您向图像请求高度时，图像可能尚未完全渲染，因此请在onload事件之后设置宽度和高度：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3766772|tmppath.onload=function()+{
++++tempWysokosc+=+tmppath.height;
++++tempSzerokosc+=+tmppath.width;
}|code-block|syntax|javascript|3766773|类似的答案：Can't+get+height+and+width+of+image+in+javascript|3766774|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/34872975/cant-get-height-and-width-of-image-in-javascript#34873142^0|Q|6|0|0|6|1D|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>Chances are that the image hasnt fully rendered by the time you ask it for the height, so set the width and height after the <code>onload</code> event:</p>

<pre><code>tmppath.onload=function() {
    tempWysokosc = tmppath.height;
    tempSzerokosc = tmppath.width;
}
</code></pre>

<p>Similar answer: <a href="https://stackoverflow.com/questions/34872975/cant-get-height-and-width-of-image-in-javascript#34873142">Can&#39;t get height and width of image in javascript</a></p>


blocks|key|3020111|text|在您的代码中，tmppath是URL.createObjectURL()的结果，即一个字符串。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3020112|这个字符串显然既没有width也没有height。您需要的是从加载的<img>元素中检索这些值，该元素的src将被设置为tmppath。但是这个过程总是异步的，所以你可能需要重构你的代码来接受这种异步性：|3020113|​|3020114|input.oninput+=+e+=>+{
const+ilosc+=+input.files.length;
const+pliki+=+input.files;

for+(let+i+=+0;+i+<+ilosc;+i%2B%2B)
{
+++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;
++}

}|code-block|syntax|javascript|3020115|<input+id="input"+type="file"+accept="image/*"+multiple>|3020116|3020117|请注意，如果你有很多这样的图像，你想要检索尺寸，你可能会对this+Q/A感兴趣，它公开了一种直接读取文件的方法，避免了解码图像的巨大开销。|BOLD|3020118|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/42540903/sort-by-image-resolution-in-gallery/42649964#42649964^0|7|7|F|L|0|A|5|I|6|Y|5|1G|3|1O|7|0|0|0|0|0|F|1J|T|8|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1I|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1J|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|1K|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|1L|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1M|8|@$9|1N|A|1O|B|T]]|D|@$9|1P|A|1Q|1|1R]]|E|$]]|$1|U|3|-4|5|6|7|1S|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]]]

<p>In your code <code>tmppath</code> is the result of <code>URL.createObjectURL()</code>, that is, a String.<br>
This string obviously doesn't have a <code>width</code> nor an <code>height</code>. 
What you want, is to retrieve these values from a loaded <code>&lt;img&gt;</code> element whose <code>src</code> will be set to <code>tmppath</code>. But this process is always asynchronous, so you'll probably need to refactor your code to embrace this asynchronicity:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>input.oninput = e =&gt; {
const ilosc = input.files.length;
const pliki = input.files;

for (let i = 0; i &lt; 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 =&gt; {
    const tempWysokosc = img.height;
    const tempSzerokosc = img.width;
    console.log({
      name: nazwa,
      size: tempRozmiar,
      type: typ,
      width: tempWysokosc,
      height: tempSzerokosc
    });
   };
   img.src = tmppath;
  }

}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="input" type="file" accept="image/*" multiple&gt;</code></pre>
</div>
</div>
</p>

<p>Note that if you have <strong>a lot</strong> of such images you want to retrieve the dimensions of, you might be interested in <a href="https://stackoverflow.com/questions/42540903/sort-by-image-resolution-in-gallery/42649964#42649964">this Q/A</a> which exposes a way of getting it from reading the files directly, avoiding the big overhead of decoding the images.</p>


<p>Can't get the dimensions - height and width: the result is always "undefined". I clearly don't understand how JavaScript works here. I am however, able to display the file.</p>

<p>The PHP file contains the following input tag, which selects multiple pictures:</p>

<pre><code>$output = "&lt;input class=\"wpisNazwyWkladow\" 
id=\"wpis_tabela_zdjecie_wybieracz\" type=\"file\" multiple 
name=\"ads_photofile\"&gt;";
</code></pre>

<p>This is the JavaScript script in question:</p>

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

for (var i = 0; i &lt; 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;

}
</code></pre>

<p>I'm expecting an integer value for "tempWysokosc" and "tempSzerokosc".</p>

<p>Need help please.</p>


Javascript - Image dimensions form multiple file input

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

无法获取尺寸-高度和宽度:结果总是“未定义”。我显然不明白JavaScript在这里是如何工作的。但是，我能够显示该文件。PHP文件包含以下输入标记，用于选择多张图片：$output = "<input class=\"wpisNazwyWkladow\" id=\"wpis_tabela_zdjecie_wybier...

问Javascript -图像维度形成多个文件输入
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript -图像维度形成多个文件输入EN