Question

我有一个仅接受图像的简单输入文件。我要在上传任何小于2mb的图像时显示成功消息。但是，当我选择图像并检查元素时，图像将转换为base64格式，并且base64字符串的大小超过了图像的实际大小（4/3比率）。

我的问题是
1.如何保持尺寸与实际图像相同？
2.还有其他解决方法。

我的代码是：

<input type="file" onchange="uploadImage(event)" />

jQuery

function uploadImage(event){
var fileReader = new FileReader();

if (fileReader && fileList && fileList.length) {
            $scope.fileSize = fileList[0].size;
            fileReader.readAsDataURL(fileList[0]);

            var ext = fileList1.value.match(/\.([^\.]+)$/)[1].toLowerCase();
            switch (ext) {
                case 'jpg':
                case 'bmp':
                case 'png':
                case 'tif':
                case 'jpeg':
                    $scope.hasInvalidFiles = false;
                    fileReader.onload = function (event) {

                        var imageData = event.target.result;
                        console.log(imageData);
                    }

                    if (fileList[0].size < 2000) {
                             console.log("success");
                    }
                    else {
                        console.log("Failure");
                    }
                    break;
                default:
                   console.log("Invalid");
            }
        }

}

Answer 1

function uploadImage(event) {
  var file = event.target.files[0]
  var fileReader = new FileReader();
  fileReader.readAsDataURL(file);
  fileReader.onload = function(e) {
    console.log(e.target.result)
    var imgBase = e.target.result;
    if (imgBase.split(',')[0].indexOf('base64') >= 0) {
      var result = imgBase.split(',')[1]; // This is the actual size.
    }
  }
  if (file.size < 2 * 1024 * 1024) {
    alert("Success");
  } else {
    alert("Failure");
  }
}

<input type="file" accept="image/png, image/jpeg" onchange="uploadImage(event)" />

如果您只接受图像。您可以使用accpet属性。另外，File对象中的size值的单位是字节而不是kb。

图像大小以base64格式增加

1 个答案: