客户端图像分辨率/尺寸验证
Client-side image resolution/size validation
我正在为一家印刷公司设计一个网站。他们想要一个图像大小/分辨率检查器,可以让他们的客户上传他们想要打印的图像,并告诉他们图像分辨率是否足够好。
我正在使用Adobe 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();
}
});
然而,我没有得到任何弹出消息。我做错了什么?
您的代码包含许多错误,这就是为什么它不能工作。(我不认为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
s包含错误消息而不是警报弹出窗口的变体:http://jsfiddle.net/uwj85m7d/8/
进一步阅读:
- 是否可以在上传之前检查图像的尺寸?(好找!)
- 从JQuery的文件输入中获取数据
- HTMLImageElement
- 形象。onError事件从未触发,但图像不是有效数据-需要解决
相关文章:
- 语义ui表单验证:图像url
- 编辑图像字段javascript验证空白图像不插入
- 在 javascript 中验证或读取远程图像类型
- 验证此图像验证码.Jquery PHP & javascript.
- 如何在上传前验证图像大小
- 通过WebRTC发送和验证图像
- 表单验证和提交时提交文本&输入按钮上带有验证的图像
- 如何通过js将二进制代码的验证图像从api转换为png
- 如何在上传前验证图像大小
- 在 Javascript, PHP 中验证图像分辨率
- Javascript:验证图像的外部Url
- 使用API文件在提交的表格上验证图像尺寸高达150X50px
- 验证图像URL
- 如何使用Angular-js验证图像文件
- 如何在将图像保存在数据库之前验证图像的大小和尺寸
- 如何使用JavaScript验证图像大小(例如“5X4”)
- 使用大小、高度和宽度验证图像上载
- 使用 jQuery 插件验证图像尺寸
- 使用 jQuery 插件验证图像
- 验证图像扩展大小写