使用Javascript上传之前检查图像的宽度和高度

javascript file-upload image image-size

2022-08-30 01:47:29

我有一个JPS，其中包含用户可以在其中放置图像的表单：

<div class="photo">
    <div>Photo (max 240x240 and 100 kb):</div>
    <input type="file" name="photo" id="photoInput" onchange="checkPhoto(this)"/>
</div>

我写了这个js：

function checkPhoto(target) {
    if(target.files[0].type.indexOf("image") == -1) {
        document.getElementById("photoLabel").innerHTML = "File not supported";
        return false;
    }
    if(target.files[0].size > 102400) {
        document.getElementById("photoLabel").innerHTML = "Image too big (max 100kb)";
        return false;
    }
    document.getElementById("photoLabel").innerHTML = "";
    return true;
}

这可以很好地检查文件类型和大小。现在我想检查图像宽度和高度，但我不能这样做。
我已经尝试过，但我得到了.通过其他方式，我得到.
有什么建议吗？target.files[0].widthundefined0

答案 1

该文件只是一个文件，您需要创建一个如下所示的图像：

var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        var objectUrl = _URL.createObjectURL(file);
        img.onload = function () {
            alert(this.width + " " + this.height);
            _URL.revokeObjectURL(objectUrl);
        };
        img.src = objectUrl;
    }
});

演示：http://jsfiddle.net/4N6D9/1/

我认为您意识到这仅在少数浏览器中受支持。主要是火狐和chrome，现在也可以是歌剧。

附言该方法已从接口中删除。此方法已于 2013 年弃用，并通过将流分配给取代。删除了旧方法，因为它不太安全，需要调用才能结束流。其他用户代理已弃用（Firefox）或删除（Safari）此功能。URL.createObjectURL()MediaStreamHTMLMediaElement.srcObjectURL.revokeOjbectURL()

有关详细信息，请参阅此处。

答案 2

在我看来，你必须要求的完美答案是

var reader = new FileReader();

//Read the contents of Image File.
reader.readAsDataURL(fileUpload.files[0]);
reader.onload = function (e) {

  //Initiate the JavaScript Image object.
  var image = new Image();

  //Set the Base64 string return from FileReader as source.
  image.src = e.target.result;

  //Validate the File Height and Width.
  image.onload = function () {
    var height = this.height;
    var width = this.width;
    if (height > 100 || width > 100) {
      alert("Height and Width must not exceed 100px.");
      return false;
    }
    alert("Uploaded image has valid Height and Width.");
    return true;
  };
};