AngularJS：有没有办法获取文件的大小？

Question

我正在实施一项检查，我不想上传尺寸大于 4MB 的图像。我正在使用 file reader 和 new image() 。我有图像大小和宽度。但是我怎样才能得到文件大小。

 function previewImage(element) {
  var reader = new FileReader();

  reader.onload = function (event) {
    seAddArtist.imageSource = event.target.result;
    $scope.$apply();
  };
  // when the file is read it triggers the onload event above.
  reader.readAsDataURL(element.files[0]);
}

var img = new Image();
img.onload = function () {
  alert(this.width + 'x' + this.height);
}

我正在实施这两个组合，但如何检查图像的大小？

原文由 Usman Iqbal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

FileReader ( FileReader API ) 本身不提供文件的大小。您需要改用 file （ 文件 API ）：

 function previewImage(element) {
  var reader = new FileReader();

  reader.onload = function(event) {
    seAddArtist.imageSource = event.target.result;
    $scope.$apply();
  };

  // when the file is read it triggers the onload event above.
  reader.readAsDataURL(element.files[0]);

  //log / access file size in bytes
  console.log(element.files[0].size + ' Bytes');

  //log / access file size in Mb
  console.log(element.files[0].size/1024/1024 + ' MB');

  if (element.files[0].size/1024/1024 > 4) {
   console.log('file is bigger than 4MB);
  }
}

原文由 lin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是获取文件大小的工作代码。您将获得以 KB 为单位的文件大小。

 <input id="file" type="file">
<img id="filerendered" src="">

并在脚本标签中

document.getElementById('file').onchange = function (event) {
var targetn = event.target || window.event.srcElement,
    files = targetn.files;

// FileReader here
if (FileReader && files && files.length) {
    var thisReader = new FileReader();

    alert("your file size "+ (files[0].size)/1024 + "kb")

    thisReader.onload = function () {
        document.getElementById("filerendered").src = thisReader.result;
    }
    thisReader.readAsDataURL(files[0]);
}

// for Not supported case
else {
    // not supported
}
}

原文由 Mustkeem K 发布，翻译遵循 CC BY-SA 3.0 许可协议