客户端图像 resolution/size 验证

Question

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

我使用的是 Adobe Muse，因此我需要一个简单的 HTML 和 CSS 解决方案，无需任何服务器端要求。

这是我目前所拥有的，基于 this question:

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 处理程序将所有这些方法调用联系在一起，并且只有在分辨率检查返回正常时才允许表单提交。

Link 到 fiddle：http://jsfiddle.net/uwj85m7d/7/

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

进一步阅读：

Is it possible to check dimensions of image before uploading?（好发现！）
Get data from file input in JQuery
HTMLImageElement
image.onError event never fires, but image isn't valid data - need a work around

客户端图像 resolution/size 验证

Client-side image resolution/size validation

html

javascript

css

image

muse