拖放图像，返回错误的大小

Question

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

奇怪的是，第一次将图像拖入div时，它返回高度（24）和宽度（24），这是不正确的。但是，如果我重新加载页面，并再次拖动相同的图像，大小是正确的！

首次将新图片拖入div：

第二次在重新加载页面后拖动相同的图片：

对我没有任何意义，因为没有什么可以保存。请参阅上面的JSFiddle示例，唯一的附加代码是大小检索，如下所示：

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文件或其他什么。

如果您有任何疑问，请与我们联系。