Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Свойство image.width не работает в Opera \ FF

Автор: zodiac 15.10.2010, 14:16

Здравствуйте!
Я использую небольшой скрипт, чтобы запрещать к загрузке слишком большие изображения.

Код


var imb=new Image();
imb.src=fn;
var sX=imb.width;
var sY=imb.height;
if(sX==0&&sY==0) {
alert('Изображение еще не загрузилось в память! Пожалуйста, попробуйте еще раз!');
return;
}

Этот код корректно работает в Эксплорере, но никак не хочет работать в Опере - свойства width и height всегда имеют значение 0.

Почему Опера не может видеть ширину и высоту рисунка? Помогите, пожалуйста, разобраться!)

Автор: bars80080 15.10.2010, 15:00

что такое fn? откуда берётся?

Автор: zodiac 15.10.2010, 23:53

Вот из этого:

Код


var fn=document.getElementById('filename').value;
if(fn=="") return;
//если файл выбран

var imb=new Image();
imb.src=fn;
var sX=imb.width;
var sY=imb.height;
if(sX==0&&sY==0) {
alert('Изображение еще не загрузилось в память! Пожалуйста, попробуйте еще раз!');
return;
}

Код


<form action="../upload.php" method="post" enctype="multipart/form-data">
<input type="file" id="filename" name="filename" />
<input type="submit" />
</form>

Автор: bars80080 15.10.2010, 23:59

ну, вообще-то поле типа файл одно из самых не берущихся и трудно анализируемых. сделано это по причинам безопасности, и в целом это не побороть. во всяком случае с позиции html+javascript вашу задачу не реализовать. /не думайте, что первый под это копаете/

единственный вариант по пробовать подкопаться через флэш. но тут уже ничего посоветовать не могу

Автор: zodiac 16.10.2010, 00:09

Да, но дело в том, что изображение на самом деле создается, путь к файлу корректно извлекается и присваивается новому объекту Image, он загружается в память... наверное, Опера в силу своих особенностей получает размеры только когда картинка выводится на страницу и становится видна пользователю.

Да, флеш могуч... наверное, так и придется сделать) Спасибо за совет!

Автор: bars80080 16.10.2010, 00:18

Цитата(zodiac @ 16.10.2010, 00:09

)

наверное, Опера в силу своих особенностей получает размеры только когда картинка выводится на страницу

это да, есть такое. точно так действует в опере, если присваивать урл-адрес, пока картинку не вывести на страницу - фиг загрузится. правда, я думал что с локальными путями будут вообще непробиваемые проблемы.
а как оно ведёт себя в ИЕ и хроме?

Автор: zodiac 16.10.2010, 00:35

Насчет хрома не знаю, в ИЕ все работает как запланировано - через некоторое время после выбора файла Эксплорер получает размеры (обычно сразу, но так как пробовал с очень большими картинками - по 12-15 мб, требовалось немного времени на загрузку), что и получаем при нажатии на кнопку...
Полностью код выглядит так:

Код


function imgValidate() {
var fn=document.getElementById('filename').value;
if(fn=="") return;

var imb=new Image();
imb.src=fn;
var sX=imb.width;
var sY=imb.height;
if(sX==0&&sY==0) {
alert('Изображение еще не загрузилось в память! Пожалуйста, попробуйте еще раз!');
return;
}
if(sX>1200||sY>1200) {
var output=document.getElementById('out');
output.innerHTML="Изображение имеет слишком большие размеры (Ширина - "+sX+", Высота - "+sY+")";
}
}

Код


<form action="../upload.php" method="post" enctype="multipart/form-data">
<input type="file" id="filename" name="filename" />
<div id="out">
<input type="button" onClick="imgValidate()" value="Проверить размер изображения" />
</div>
</form>

Т.е. все делается при нажатии на кнопку. Может ли причина проблемы (пусть частично) крыться и в этом?

Автор: Elfet 16.10.2010, 12:07

zodiac, картинка не успевает загрузится. Попробуй вот так:

Код


var width;
var height;
var img = new Image();
img.onload = function () {
        width = this.width;
        height = this.height;
}
img.src = url;

Автор: zodiac 16.10.2010, 21:36

Попробовал, в Эксплорере стало получше, спасибо) а в Опере событие onLoad вообще не происходит...
Стало быть, вопрос приобретает другой характер: как обойти эту исключительно "оперную" особенность и заставить ее загрузить изображение, но так, чтобы этого не заметил пользователь? Есть идея загрузить в div, но он может страницу растягивать... И чтобы картинка полностью не грузилась, надо как-то прервать загрузку картинки сразу после того, как div, в который она грузится, изменит размеры... подскажите, как это можно бы сделать? =)