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

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);
  }

这里我无法获取文件高度和宽度。我还检查文件是否尚未上传。

Answer 1

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

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

DEMO

suppose i have one button and without selecting file if I am clicking on the file alert should say to select the file.

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

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