客户端图像分辨率/大小验证

Question

我正在为一家印刷公司设计一个网站。他们想要一个图像尺寸/分辨率检查器，让他们的客户上传他们想要打印的图像，并告诉他们图像分辨率是否足以打印。

我正在使用 Adob​​e Muse，所以我需要一个简单的 HTML 和 CSS 解决方案，没有任何服务器端要求。

基于这个问题，这是我到目前为止所拥有的：

window.URL = window.URL || window.webkitURL;
$("form").submit(function(e) {
    var form = this;
    e.preventDefault(); //Stop the submit for now

   //Replace with your selector to find the file input in your form var
   fileInput = $(this).find("input[type=file]")[0];
   file = fileInput.files && fileInput.files[0];
   if (file) {
       var img = new Image();
       img.src = window.URL.createObjectURL(file);

        img.onload = function() {
            var width = img.naturalWidth, height = img.naturalHeight;
            window.URL.revokeObjectURL( img.src );
            if( width == 400 && height == 300 ) {
                form.submit();
            } else { 
                //stop
            } 
        }; 
    } else {
        //No file was input or browser doesn't support client side reading
        form.submit();
    }
});

但是，我没有收到任何弹出消息。我究竟做错了什么？

Answer 1

您的代码包含许多错误，这就是它无法正常工作的原因。（我认为该submit事件甚至没有绑定到表单，因为您的 jQuery 选择器看起来不正确：它应该是#form或.form）

这是一个有效的解决方案：

HTML

<form id="form" action="destination.html">
    <input type="file" id="filePicker" />
    <br/>
    <input type="submit" value="Submit" />
</form>

JS

var _URL = window.URL || window.webkitURL;

function isSupportedBrowser() {
    return window.File && window.FileReader && window.FileList && window.Image;
}

function getSelectedFile() {
    var fileInput = document.getElementById("filePicker");
    var fileIsSelected = fileInput && fileInput.files && fileInput.files[0];
    if (fileIsSelected)
        return fileInput.files[0];
    else
        return false;
}

function isGoodImage(file) {
    var deferred = jQuery.Deferred();
    var image = new Image();

    image.onload = function() {
        // Check if image is bad/invalid
        if (this.width + this.height === 0) {
            this.onerror();
            return;
        }

        // Check the image resolution
        if (this.width >= 400 && this.height >= 400) {
            deferred.resolve(true);
        } else {
            alert("The image resolution is too low.");
            deferred.resolve(false);
        }
    };

    image.onerror = function() {
        alert("Invalid image. Please select an image file.");
        deferred.resolve(false);
    }

    image.src = _URL.createObjectURL(file);

    return deferred.promise();
}


$("#form").submit(function(event) {
    var form = this;

    if (isSupportedBrowser()) {
        event.preventDefault(); //Stop the submit for now

        var file = getSelectedFile();
        if (!file) {
            alert("Please select an image file.");
            return;
        }

        isGoodImage(file).then(function(isGood) {
            if (isGood)
                form.submit();
        });
    }
});

isSupportedBrowser() 在尝试检查图像之前，请确保用户的浏览器支持所需的功能。

getSelectedFile() 确保用户选择了一个文件，然后将文件数据传回。

isGoodImage()获取文件数据并尝试从中构建图像元素。如果onerror被触发，则它不是图像或损坏的文件。如果onload被触发，它会进行完整性检查以确保图像具有有效的尺寸，然后验证分辨率是否高于 400x400。

由于onerror和onload事件是异步触发的，因此该函数需要传回一个表示验证结果的承诺。

最后，submit表单上的处理程序将所有这些方法调用联系在一起，并且仅在解析检查结果良好时才允许表单提交。

小提琴链接：http : //jsfiddle.net/uwj85m7d/7/

根据要求编辑，显示div包含错误消息而不是警报弹出窗口的变体：http : //jsfiddle.net/uwj85m7d/8/

进一步阅读：

• 上传前是否可以检查图像的尺寸？（好找！）
• 从 JQuery 中的文件输入获取数据
• HTML图像元素
• image.onError 事件永远不会触发，但图像不是有效数据 - 需要解决