拖放图像，返回错误大小

Question

我使用预制脚本将图像从计算机文件夹中拖放到 div 中（请参阅 JSFiddle：http://jsfiddle.net/JtJ5N/1/）。脚本工作正常，但我在检索图像大小时遇到​​问题 - 第一次获取新图像。

奇怪的是，我第一次将图像拖到 div 中时，它返回了 height(24) 和 width(24)，这是不正确的。但是，如果我重新加载页面，并再次拖动相同的图像，大小是正确的！

第一次将新图片拖入div：

第二次拖动同一张图片，重新加载页面后：

对我来说没有任何意义，因为不应该保存任何东西。请参阅上面的 JSFiddle 示例，唯一的附加代码是 size-retrieval 如下：

list.appendChild(img);
var imgheight = img.height;
var imgwidth = img.width;
alert("width: " + imgwidth + ", height: " + imgheight);

Answer 1

我认为问题在于图像未加载。当您刷新/重新加载页面时，图像在浏览器缓存中，因此，当代码执行以读取其宽度 x 高度时，它已经知道图像并为您提供正确的答案。

请查看FIDDLE HERE 以获得解决方案。每当删除带有图像不同细节的图像时，此代码都会发出警报。

请注意以下代码：

 var dummyimage = new Image();

然后

                dummyimage.src = e.target.result;
                dummyimage.onload = function() {
                    // to add loaded image to document
                    list.appendChild(dummyimage);
                    // various properties of image
                    alert('width:' + this.width + ' x height:' + this.height + ' --- ' + file.type + '  ' + file.name  + '  ' + file.size);
                };
                dummyimage.onerror= function() {
                    alert('Image could not be loaded');
                };

该代码还会让您知道加载图像时是否存在问题。例如。如果一个 .doc 文件被删除或什么的。

如果您有任何问题，请告诉我。