Question

我需要验证一个文件字段是否具有所需的宽度，高度以及文件是否未使用JavaScript上传，但不会发生这种情况。我在下面解释我的代码。

<input type="file" name="copImage" id="copImage" class="form-control"  value="" onchange="setBackgroundImage(event);">
function setBackgroundImage(e){
     var url = URL.createObjectURL(e.target.files[0]);
    bg = new Image();
    bg.src = url;
    bg.onload = function () {
        bgLoaded = true;
        backImageHeight=this.height;
        backImageWidth=this.width;
    };
    console.log('size bg',backImageHeight,backImageWidth);
  }

我无法获取文件height和width。我还要检查if文件是否尚未上传。

Answer 1

在onload函数中填写日志语句。这是因为您尝试访问其范围之外的变量，否则在onload函数之外定义这些变量

bg.onload = function() {
    var bgLoaded = true,
    backImageHeight = this.height,
    backImageWidth = this.width;
    console.log('size bg',backImageHeight,backImageWidth);
  };

DEMO

假设我有一个按钮而没有选择文件，如果我点击在文件警报上应该说要选择文件。

似乎你无法使用onchange事件处理程序执行此操作，因为如果未加载文件。没有任何改变，所以功能不会发生。在这种情况下，您可以创建一个变量＆amp;在文件上传时更新其状态。单击按钮时，检查变量状态

var isFileLoaded = false;
function setBackgroundImage(fileValue) {
  var url = URL.createObjectURL(fileValue.files[0]);
  bg = new Image();
  if (fileValue.value !== '') {
    bg.src = url;
    bg.onload = function() {
      bgLoaded = true;
      isFileLoaded = true;
      backImageHeight = this.height;
      backImageWidth = this.width;
      console.log('size bg', backImageHeight, backImageWidth);
    };
  }
}

function buttonClick() {
  if (isFileLoaded) {

  } else {
    alert('No file selected')
  }

}

DEMO 2

Answer 2

您好，您只需要在bg.onload函数中记录您的高度和宽度。这些都在变量范围之外。这就是为什么你没有得到这样的高度和宽度

function setBackgroundImage(e){
 var url = URL.createObjectURL(e.target.files[0]);
bg = new Image();
bg.src = url;
bg.onload = function () {
    bgLoaded = true;
    backImageHeight=this.height;
    backImageWidth=this.width;
        console.log('size bg',backImageHeight,backImageWidth);
};

}

Answer 3

你的代码中的一切都很好，你需要在bg.onload块中包含console.log（），就像这样。

function setBackgroundImage(e)
{
    var url = URL.createObjectURL(e.target.files[0]);
    bg = new Image();
    bg.src = url;
    bg.onload = function () {
        bgLoaded = true;
        backImageHeight=this.height;
        backImageWidth=this.width;
        console.log('size bg',backImageHeight,backImageWidth);
    };

}

function isFileSelected()
{
    return document.getElementById('copImage').files.length > 0;
}

您可以使用 isFileSelected（）函数来了解是否选择了文件。

使用JavaScript上传后无法获取文件大小

3 个答案: