Ваш код содержит ряд ошибок, поэтому он не работает. (Я не думаю, что событие 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/
Изменить В соответствии с запросом вариант, который показывает divs, содержащие сообщения об ошибках, вместо всплывающих окон с предупреждениями: http://jsfiddle.net/uwj85m7d/8/
Дальнейшее чтение:
person
Nate Barbettini
schedule
03.10.2015
