我正在为一家印刷公司设计一个网站。他们想要一个图像尺寸/分辨率检查器，让他们的客户上传他们想要打印的图像，并告诉他们图像分辨率是否足以打印。
我正在使用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();
}
});
但是，我没有收到任何弹出消息。我做错了什么？
答案 0 :(得分：2)
您的代码包含许多错误，这就是它无法正常工作的原因。 （我不认为,事件甚至被绑定到表单，因为你的jQuery选择器看起来不正确：它应该是submit或#form）
这是一个有效的解决方案：
HTML
.formJS
<form id="form" action="destination.html">
<input type="file" id="filePicker" />
<br/>
<input type="submit" value="Submit" />
</form>
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被触发，则会进行完整性检查以确保图像具有有效尺寸，然后验证分辨率是否高于400x400。
由于onload和onerror事件是异步触发的，因此该函数需要传回一个指示验证结果的promise。
最后，表单上的onload处理程序将所有这些方法调用绑定在一起，并且只有在分辨率检查恢复良好时才允许表单提交。
链接到小提琴：http://jsfiddle.net/uwj85m7d/7/
编辑根据要求，显示submit包含错误消息而非警告弹出窗口的变体：http://jsfiddle.net/uwj85m7d/8/
进一步阅读：