Javascript 使用文件读取器读取图像的宽度？

我在读取文件读取器的大小时遇到问题。尝试过各种浏览器和文件后，宽度始终返回为0

    var fileReader = new FileReader();
    var img = new Image();

    fileReader.onload = function(event) {
        img.src = event.target.result;
        console.log(img.width);

    };

    fileReader.onerror = function() {

        //handle error
    };

    fileReader.readAsDataURL(file);

文件变量在拖放事件中从以下位置循环输出：

e.originalEvent.dataTransfer.files

---

可能您的图像对象未加载请尝试以下操作：

img.onload = function () {console.log(img.width)}

---

可能您的图像对象未加载请尝试以下操作：

img.onload = function () {console.log(img.width)}

---

我认为您在为图像分配二进制数据时出错

分配图像：

fileReader.onload = function(e) {
    var img = new Image();
    img.src = fileReader.result;
}

演示：

document.getElementById（'img'）.addEventListener（'change'，函数（e）{
var file=this.files[0]；
var fileReader=newfilereader（）；
var img=新图像（）；
fileReader.onload=函数（事件）{
img.src=fileReader.result；
img.onload=函数（）{
控制台日志（img.宽度）；
}
document.getElementById（'result'）.appendChild（img）；
};
fileReader.readAsDataURL（文件）；
})

---

我认为您在为图像分配二进制数据时出错

分配图像：

fileReader.onload = function(e) {
    var img = new Image();
    img.src = fileReader.result;
}

演示：

document.getElementById（'img'）.addEventListener（'change'，函数（e）{
var file=this.files[0]；
var fileReader=newfilereader（）；
var img=新图像（）；
fileReader.onload=函数（事件）{
img.src=fileReader.result；
img.onload=函数（）{
控制台日志（img.宽度）；
}
document.getElementById（'result'）.appendChild（img）；
};
fileReader.readAsDataURL（文件）；
})

fileReader on load事件肯定会涉及到这一点，两者之间有什么区别？通常我都使用这两种方法。因为读取图像文件然后将内容放入javascript需要一些时间，所以加载需要一些时间，以避免此时间重叠问题。@panthro“fileReader on load事件肯定会涵盖此内容”否。您需要两个

加载

事件。当然fileReader on load事件涵盖了这一点，两者之间的区别是什么？通常我都使用这两种方法。因为读取图像文件然后将内容放入javascript需要一些时间，所以加载需要一些时间，以避免此时间重叠问题。@panthro“fileReader on load事件肯定会涵盖此内容”否。您需要两个

加载

事件@潘思罗看起来一切正常。附属的snippet@Yury塔拉班科，谢谢！更新为Chrome@panthro看起来一切都好。附属的snippet@Yury塔拉班科，谢谢！为Chrome更新