获取上传图像的宽度（在将文件上传到服务器之前）

Question

我有一些我更改的代码。以前是获取文件分机。我希望它获得上传图像的宽度（甚至在单击提交输入之前），如果它太小，则发出警报。问题是我真的不知道如何将这个 js 代码与 html 表单连接起来。

<form id="add" method="POST" enctype="multipart/form-data" action="upload.php">
<input type="file" id= "filput" style="margin-bottom:30px; margin-top:20px;" name="file" size="40" />
</form>


$("#filput").on('change', function () {
    var w = $(this).width();
    if (w < 500) {
        alert("too small");
    } else {
        alert("big");
    }
});

Answer 1

this 指的是输入而不是图像。您也使用了 HTML5 文件 API。

你可以使用这个例子：How to get the image width from html 5 file API

代码示例：复制自：Getting Image Dimensions using Javascript File API

$("#filput").on('change', function () {
     var fr = new FileReader;

    fr.onload = function() { // file is loaded
        var img = new Image;

        img.onload = function() {
            alert(img.width); // image is loaded; sizes are available
        };

        img.src = fr.result; // is the data URL because called with readAsDataURL
    };

    fr.readAsDataURL(this.files[0]); // I'm using a <input type="file"> for demonstrating
});