Javascript Image.width为0

我正在使用一个函数来验证上传图像的大小。这很好，现在我还想检查图像是否比某些像素宽（比如1280像素）。但var宽度仍然为零。我已尝试使用outerwith、innerwidth和file.files[0].width

function ValidateSize(file) {
    var FileSize = file.files[0].size / 1024 / 1024; // in MB
    var NewFilze = FileSize.toFixed(2);

    var height = file.height;
    var width = file.width;

    if (FileSize > 13) {
        alert("The file size of your picture (" + NewFilze + " MB) exceeds the maximum allowed filesize (12,5 MB). Still problems with resizing your pictures? Use for example www.imageresize.org.");
    }else if(width < 1280){
        alert("The width of your image  (" + width + " pixels) is lower than the required minimum width (1280 pixels)");
    }else{

    }
}

函数ValidateSize（文件）{
var FileSize=file.files[0].size/1024/1024；//以MB为单位
var NewFilze=FileSize.toFixed（2）；
var height=file.height；
var width=file.width；
如果（文件大小>13）{
警告（“图片的文件大小（“+NewFilze+”MB）超过了允许的最大文件大小（12,5 MB）。调整图片大小仍有问题？请使用www.imageresize.org。”）；
}否则，如果（宽度<1280）{
警告（“图像的宽度（“+宽度+”像素）低于所需的最小宽度（1280像素）”；
}否则{
}
}

---

提前感谢

如果我不能自己测试，我建议尝试以下方法：

function ValidateSize(file) {
  var FileSize = file.files[0].size / 1024 / 1024; // in MB
  var NewFilze = FileSize.toFixed(2);
  var reader = new FileReader();

  reader.readAsDataURL(fileUpload.files[0]);
  reader.onload = function (e) {
    var image = new Image();
    image.src = e.target.result;
    image.onload = function () {
      var height = this.height;
      var width = this.width;

    if (FileSize > 13) {
       alert("The file size of your picture (" + NewFilze + " MB) exceeds the maximum allowed filesize (12,5 MB). Still problems with resizing your pictures? Use for example www.imageresize.org.");
    }else if(width < 1280){
       alert("The width of your image  (" + width + " pixels) is lower than the required minimum width (1280 pixels)");
    }else{

    }
} 

函数ValidateSize（文件）{
var FileSize=file.files[0].size/1024/1024；//以MB为单位
var NewFilze=FileSize.toFixed（2）；
var reader=new FileReader（）；
reader.readAsDataURL（fileUpload.files[0]）；
reader.onload=函数（e）{
var image=新图像（）；
image.src=e.target.result；
image.onload=函数（）{
var高度=此高度；
var-width=这个.width；
如果（文件大小>13）{
警告（“图片的文件大小（“+NewFilze+”MB）超过了允许的最大文件大小（12,5 MB）。调整图片大小仍有问题？请使用www.imageresize.org。”）；
}否则，如果（宽度<1280）{
警告（“图像的宽度（“+宽度+”像素）低于所需的最小宽度（1280像素）”；
}否则{
}
} 

我应该注意到这是未经测试的，取决于你的js在某些浏览器上运行（最好是chrome或FF）。如果是服务器端，我认为visibleman是最好的答案

祝你好运，黑客快乐

---

信用卡到期时

如果我无法自己测试，我建议尝试以下方法：

function ValidateSize(file) {
  var FileSize = file.files[0].size / 1024 / 1024; // in MB
  var NewFilze = FileSize.toFixed(2);
  var reader = new FileReader();

  reader.readAsDataURL(fileUpload.files[0]);
  reader.onload = function (e) {
    var image = new Image();
    image.src = e.target.result;
    image.onload = function () {
      var height = this.height;
      var width = this.width;

    if (FileSize > 13) {
       alert("The file size of your picture (" + NewFilze + " MB) exceeds the maximum allowed filesize (12,5 MB). Still problems with resizing your pictures? Use for example www.imageresize.org.");
    }else if(width < 1280){
       alert("The width of your image  (" + width + " pixels) is lower than the required minimum width (1280 pixels)");
    }else{

    }
} 

函数ValidateSize（文件）{
var FileSize=file.files[0].size/1024/1024；//以MB为单位
var NewFilze=FileSize.toFixed（2）；
var reader=new FileReader（）；
reader.readAsDataURL（fileUpload.files[0]）；
reader.onload=函数（e）{
var image=新图像（）；
image.src=e.target.result；
image.onload=函数（）{
var高度=此高度；
var-width=这个.width；
如果（文件大小>13）{
警告（“图片的文件大小（“+NewFilze+”MB）超过了允许的最大文件大小（12,5 MB）。调整图片大小仍有问题？请使用www.imageresize.org。”）；
}否则，如果（宽度<1280）{
警告（“图像的宽度（“+宽度+”像素）低于所需的最小宽度（1280像素）”；
}否则{
}
} 

我应该注意到这是未经测试的，取决于你的js在某些浏览器上运行（最好是chrome或FF）。如果是服务器端，我认为visibleman是最好的答案

祝你好运，黑客快乐

---

信用卡到期时

您需要将文件转换为图像：

以下是如何将文件转换为img以获得宽度和高度的示例：

function getSize(file) {
    const img = new Image();
    var file = file.files[0];
    var reader = new FileReader();
    reader.addEventListener("load", function() {
        img.src = reader.result;
    }, false);
    const promise = new Promise((resolve, reject) => {
        img.onload = () => {
            console.log(img.naturalWidth, img.naturalHeight);
            resolve([img.naturalWidth, img.naturalHeight]);
        };
    });
    if (file) {
        reader.readAsDataURL(file);
    }
    return promise.then(res => [img.naturalWidth, img.naturalHeight]);
}

---

您可以进行一些更改以使其适用于您的案例。祝您好运

您需要将文件转换为图像：

以下是如何将文件转换为img以获得宽度和高度的示例：

function getSize(file) {
    const img = new Image();
    var file = file.files[0];
    var reader = new FileReader();
    reader.addEventListener("load", function() {
        img.src = reader.result;
    }, false);
    const promise = new Promise((resolve, reject) => {
        img.onload = () => {
            console.log(img.naturalWidth, img.naturalHeight);
            resolve([img.naturalWidth, img.naturalHeight]);
        };
    });
    if (file) {
        reader.readAsDataURL(file);
    }
    return promise.then(res => [img.naturalWidth, img.naturalHeight]);
}

---

您可以进行一些更改以使其适用于您的案例。祝您好运

此时文件对象是什么样子的。它是否有.width和.height？对于大小，您从

文件.files[0]中获取数据但是，对于高度和宽度，你只需检查<代码>文件>代码>什么是代码>文件>代码>什么是“代码>文件？文件< /代码>应该是什么？区别是什么？因为它可以检测文件大小，我假设它可以检测到高度和高度。也许不是。文件对象可能只是一个文件。你可能想考虑将文件转换成文件。首先是图像。研究如何使用FileReader，然后将其转换为图像。这个问题涵盖得相当透彻：此时文件对象是什么样子的。它是否有.width和.height？对于大小，您从
file.files[0]获取数据但是，对于高度和宽度，你只需检查<代码>文件>代码>什么是代码>文件>代码>什么是“代码>文件？文件< /代码>应该是什么？区别是什么？因为它可以检测文件大小，我假设它可以检测到高度和高度。也许不是。文件对象可能只是一个文件。你可能想考虑将文件转换成文件。首先是图像。研究如何使用FileReader，然后将其转换为图像。这个问题涵盖得相当透彻：这是对的，我不知道为什么我只是假设它是服务器端。函数看起来应该是服务器端，但我更喜欢前端，所以我想为什么不尝试前端解决方案。这是对的，我不知道为什么我只是假设它是服务器端med它是服务器端。这个函数看起来应该是服务器端，但我更喜欢前端，所以我想为什么不试试前端解决方案呢。