Forum Webscript.Ru
Программирование => JavaScript & JScript => Тема начата: ashes от 29 Августа 2005, 16:57:12
-
Скрипт создаёт предварительные thumbnail\'ы (на стороне клиента) для фотографий, которые выбираются через input type="file". Примерно в половине случаев, особенно когда изображения большие (но не всегда), скрипт не определяет ширину или высоту выбранного изображения (определяет = 0). Из-за этого не создаётся thumbnail (потому что он пропорционален исходному изображению).
Мне кажется, что это из-за того, что браузеру не хватает времени, чтобы подгрузить и вычислить размеры изображения. Можно ли как-нибудь увеличить это время, организовать задержку (setTimeout() не помогает, зато помогает предварительно вызванный alert(), но не могу же я пугать пользователей alert\'ами). Пожалуйста, помогите. Я просто измучалась с этим скриптом.
Спасибо.
-
ashes
Подробнее? Про thumbnail (каким образом) и определение ширины/высоты.
-
Протестировать и посмотреть код можно здесь:
http://www.tcomplex.ru/temp/test_boxes.html
В общих чертах функция работает очень просто:
file_src = document.getElementById(filefield).value;
(где filefield - id поля input type="file")
image_src = file_src.replace(/\\\\/g, \'/\');
***
var img = new Image();
img.src = image_src;
***
img_height = img.getAttribute(\'height\');
(здесь скрипт иногда не определяет высоту, и тогда thumbnail не создаётся)
-
ashes
Что тестировать - немного не ясно, т.к. у меня, например, вообще ничего (кроме кнопки "обзор") не заработало.
Идею вкратце понял: ты хочешь перед отправкой файла на сервер показать превьюху.
Обломаю: в большем количестве случаев нарвешься на ограничения безопасности. Просто не даст прочитать локальный файл.
-
Забыла сказать, что это версия - для IE (4 и выше). В Opere (или firefox\'e) она действительно не сработает. Если у тебя есть IE, можешь посмотреть с помощью него, пожалуйста?
При чём тут ограничения безопасности - пользователь на своём компьютере смотрит свой же файл... Это обычный тэг img. (Скрипт на javascript. Естественно, если javascript не разрешён, ничего не получится).
В любом случае, скрипт уже написан и работает. Он не срабатывает только иногда, но вовсе не из-за какой-то там безопасности, а из-за того, что браузеру не хватает времени (или чего то ещё), чтобы подгрузить картинку в свой кэш (или куда он там её грузит) и определить её геометрические размеры. Что мне с этим делать?
-
ashes
IE6: не работает.
По существу вопроса: не срабатывает из-за того, что браузер не успевает загрузить изображение.
Есть вариант вешать обработку изображения на img.onLoad
Пользователь не "на своём компьютере смотрит свой же файл", а чужой скрипт читает и обрабатывает файл с его локального диска (пусть и выбранный). Как бы то ни было, в IE6 с дефолтовой безопасностью у меня не работает.
-
c img.onLoad результат тот же (по-моему, это событие означает начало загрузки, а не конец).
Потому что я пишу:
img.onLoad = alert(img.complete); и периодически вижу false...
(свойство complete как раз показывает, завершена ли загрузка)
Насчёт безопасности - что же делать... (Хотя я только что поставила безопасность на дефолтовый уровень, и всё продолжает работать). Значит, те, у кого безопасность достаточно высокая, не увидят предпросмотра. Другого выхода нет. Или есть?
А в чём выражается "не работает"? Он хотя бы имя файла подписывает сверху и путь в текстовом поле снизу? (навряд ли...)
Спасибо, что уделяете мне своё время.
-
ashes
Наверху имя файла пишет. А загружать - не загружает.
Можно так:
while(img.complete) {
//т.е. пустой цикл до загрузки
}
Но ругнется, скажет "исполнение скрипта может занять время"
onLoad - событие, срабатывающее после полной загрузки элемента
-
Значит всё-таки дело не в безопасности... И thumbnail создаётся и отображается, только с нулевой высотой...
Если событие onLoad срабатывает при полной загрузке, почему тогда img.onLoad = alert(img.complete); иногда выводит false?
while(img.complete == false) - не только ругнётся, но ещё и начнёт подвисать, а загрузить - всё равно не загрузит :(
Пока помогает только вызов alert() там, где определяется высота:
img_height = img.getAttribute(\'height\');
alert(img_height); //этот скорее всего выдаст 0
img_height = img.getAttribute(\'height\');
alert(img_height); //а этот - правильную высоту
-
Если не ошибаюсь, мне иногда в таких случаях помогал цикл
var img_height=0;
while(img_height==0)
{img_height=img.getAttribute(\'height\');}
-
virka, нет, получается та же история, что и с while(img.complete == false) (виснет, то есть).
Есть какой-нибудь способ организовать задержку?
-
ну еще можно попробовать setTimeout, только поставить его в цикл.
function getHeight()
{
var img_height=img.getAttribute(\'height\');
if(img_height==0){setTimeout("getHeight()",1000);}
else{return img_height;}
}
img нужно сделать, конечно, глобальной.
-
Только функцию, конечно, лучше назовите не getHeight :)
-
virka ashes
Если уж говорить глобально, то я бы вышеизложенную задачу решал средствами сервера. Потому как если юзер туда необработанный JPEG метра на 4 сунет, то сдохнет не только скрипт, но и instance браузера...