<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
var oP = $('#TdAvaPerent').on('change', 'input:file', function() {
if(window.FileReader) { //это проверка на поддержку браузером данного объекта
var im = new Image(), r = new FileReader(), f = this.files[0];
//типы загружаемых изборажений указаны в поле file,
//по его значению готовим рег. выражение для проверки
if(f.type.match(new RegExp(this.accept.replace(/,/,'|')))){
r.readAsDataURL(f);
r.onload = function(e) {
im.onload = function() {
if(this.width>200 || this.height>200){
alert('Пожалуйста загрузите картинку приемлемых размеров. В противном слуие вашь файл не будет загружен');
clearFile(oP)
}
}
im.src = e.target.result;
}
} else {
alert('Вы ошиблись файлом. Загрузите изображение. В противном случае вашь файл не будет загружен');
clearFile(oP)
}
} else alert('Ваш браузер устарел, установите ... и ссылки на ресурсы, и срочно обращаться к ... не требуется');
});
});
//иначе могут плодится поля выбора файла
function clearFile(o) {
o.html('<input ' + $.map(o.children().get(0).attributes, function(v) {
return v.name + '="' + v.value + '"'
}).join(' ') + '>')
}
</script>
</head>
<body>
<div id="TdAvaPerent"><input type="file" name="images" class="f_input" accept="image/jpeg,image/png"/></div>
</body>
</html>
id="ava" - не нужен вообще, если ни где-то более не используется.
accept="image/jpeg,image/png" - разрешенное для выбора в диалоге выбора файла, правда не все браузеры будут отображать именно изображения в папках, но по этому атрибуту производится проверка (см. в скрипте).
PS. Подправил код, чтобы не зависеть хотя бы от изменения атрибутов поля ввода.