Java Script работает в IE, но не работает в Opera

@Toller · Регистрация: 18.06.2009

И так задача:
Есть форма, на форме поле ввода типа "file". Нужно подменить кнопку "обзор" картинкой и отнести ее (картинку) подальше от основного поля ввода. Вот как я это сделал:
<tr>
<td background="imagesinput.gif" height="33" width="422 <input type="text" name="filename" style="width: 415; </td>
<td width="70 </td>
<td width="150" align="right <div style="visible:false; display:none; <input type="file" name="dialog" onChange="filename.value=dialog.value; </div><a href="javascript: p2m.dialog.click(); <img src="imagesrowse.gif </a></td>
</tr>
Т.е. поле ввода типа файл - невидимое. Окно диалога выбора файла вызывает при кликаньи мышкой по изображению:
<a href="javascript: dialog.click(); <img src="imagesrowse.gif </a>.
При каких-то изменениях в текстовом поле типа file текст этого поля передается в текстовое поле filename:
<input type="file" name="dialog" onChange="filename.value=dialog.value;
<STRONG>ПРОБЛЕМА ЗАКЛЮЧАЕТСЯ В ТОМ, ЧТО СКРИПТ РАБОТАЕТ В IE, НО НЕ РАБОТАЕТ В OPERE</STRONG>.
Что я сделал не так??? Заранее благодарен.

04.12.2006, 13:47

Если я не ошибаюсь то проблема в прямом обращении к полям, тут где то в моей теме одной писали что лучше использовать window.document.getElementById() - это точно и без ошибок отработает любой броузер. Ищет как по ИД так и по имени

@Toller · 04.12.2006, 21:30 **[ТС]**

не работает!!! Не выходит каменный цветок... тьфу... т.е не появляется окошко... написал вот так:
window.document.getElementById('dialog').click();
а результат тот же, но ошибку не выдает. и FireFox мозг компосирует

Что еще может быть?
Большое спасибо за то, что откликнулся!!!

05.12.2006, 13:32

Лично у меня ни одна джаваскриптовая функция еще не принимала параметры заключенные в одинарные кавычки, только в двойные. Может быть это только у меня такая проблема, но ты всетаки проверь )
Вообще чтобы не путаться хорошая как мне кажется привычка атрибуты ХТМЛ тегов заключать в одинарные кавычки, а джаваскриптовые строки в двойные, а то напишешь к примеру
<button onclick='getElementById('element_id')'>
и что думаешь - сработает? Щас, преобразуется тут же в
<button onclick='getElementById(' element_id')'>
и вторую часть смело проигнорирует как неопознанный атрибут, а первую - как неправильное действие

@Toller · 05.12.2006, 14:14 **[ТС]**

ну а у меня наоборот: сначала двойные кавычки, потом одинарные. думаю, что это не принципиально. но все равно не работает. что тут еще может быть?

05.12.2006, 16:16

Так, скорее всего проблема гдето тут
<a href="javascript: dialog.click(); <img src="imagesrowse.gif </a>
Я в общемто не очень понимаю что значит javascript: p2m.dialog.click() , просто незнакомая форма записи, но попробуй переписать это как
<img src="imagesrowse.gif" onclick='dialog.click()'>
ну и конечно прямые обращения к именам замени всеже на вызов функции как я писал в начале

@Toller · 05.12.2006, 19:18 **[ТС]**

да, сегодня подобная мысль меня уже посещала. я попробовал сделать обработчик события onclick - та же барадаааа. в IE работает, в Opera Or FireFox - не фига. Заказчик уже обещает порвать пасть...

Может тоже настройки?

05.12.2006, 20:08

фиг его разберет. Приведи всю рабочую часть от <form> до </form>
попробуй убрать visible, оставь только display : none
поменяй все обращения по идешникам напрямую на то что я сказал через функции и продублируй имена идшниками
поменяй одинарные кавычки в джаве на двойные и соответственно в ХТМЛ наоборот чтобы было правильно
Поменяй все имена и ИДшники компонентов, вообще все переменные имена которые ты используешь на имена вида my_имя, может быть где то какой то внутренний параметр захватил нечаянно.
Если все это вместе не дало ефекта попробуй использовать другой обработчик событий:http://xpoint.ru/know-how/JavaScript/PoleznyieFunktsii#NaznachenieNeskol'kihObrabotch http://xpoint.ru/know-how/JavaScript/PoleznyieFunktsii#NaznachenieNeskol'kihObrabotch
Перепроверь код на наличие опечаток или мелких глюков, ИЕ их пропускает, а вот оперы и файерфоксы могут и не пустить.
И напиши наконец какая ошибка пишется, если пишется какая то? А еще лучше дай линк на эту страницу, эсли это возможно )

@Toller · 06.12.2006, 17:10 **[ТС]**

Ну хорошо... А как тогда по другому сделать то, о чем я говрил в начале:
а именно изменить вид поля типа file для uploading?

@bazile · 06.12.2006, 17:23

Попробуй такой http://www.quirksmode.org/dom/inputfile.html вариант. Правда если верить комментариям к этой статье, то код не работает в Opera и в ie7 есть проблемы. Не знаю так это или нет.

06.12.2006, 18:49

По моему способ глупый довольно. Да и в первом посте явно ж сказано - проблема в том что в Опере не работает ) В ИЕ и так все в порядке )
Нет, ну идея забавная, но достаточно посмотреть на картинку приведенную в статье которая показывает разные браузеры и мы поймем что с сафари ничего не выйдет в принципе, там кнопка посредине, а с другими будут глюки с размером кнопки.
Единственное что я там почерпнул интересного:
<SPAN class=smaller>(Note that you can't use <CODE>visibility: hidden</CODE>, because a truly invisible element is unclickable, too, and we need the <CODE><input type="file </CODE> to remain clickable)</SPAN>
То есть таки надо убрать visibility из кода и оставить display : none , возможно поэтому в опере не запускается метод click. Но это вилами по воде.
Этого я вообще не понял там:
One problem remains: the user can't choose not to upload a file after all.
Suppose the user selects a file, then on second thought decides not to upload it. In a normal <CODE><input type="file </CODE> he can simply remove the path, and the file won't be uploaded. In our example, though, this is very difficult. Try it, it can be done, but it's totally counter-intuitive.
то есть так проблематично поставить на onchange нашего фейкового инпута изменение значения инпута файлового? Или чтобы не попасть в вечную рекурсию на onKeyPressed, onKeyUp или еще куда?

@bazile · 06.12.2006, 19:25

DarkSet (06.12.2006)
Этого я вообще не понял там:
One problem remains: the user can't choose not to upload a file after all.
Suppose the user selects a file, then on second thought decides not to upload it. In a normal <CODE><input type="file </CODE> he can simply remove the path, and the file won't be uploaded. In our example, though, this is very difficult. Try it, it can be done, but it's totally counter-intuitive.

Перевод: "Остается одна проблема: пользователь не может отказаться от загрузки файла. Представим, что пользователь выбрал файл, но затем решает отказаться от его загрузки. В обычном <input type="file он может просто удалить путь и файл не будет загружен. В нашем же примере это сделать сложно. Попробуйте, это можно сделать, но это будет запутанное решение".

06.12.2006, 20:41

Не, ты не понял

Я понял что написано, я не понял в чем сложность - решение ведь елементарное, я его написал. Какой то этот автор.. не очень.. )

@bazile · 06.12.2006, 21:02

Дело в том что присвоить значение <input type=file> из скрипта нельзя. Из соображений безопасности.

@Toller · 07.12.2006, 17:42 **[ТС]**

ну не все же такие Гуру!!!
Можно все-таки попросить конкретный рецепт?
P.S. Заранее всем спасибо за деятельное участие в моей проблемке

11.12.2006, 13:55

Видимо рецепта действеннее предложеного безилом нет. Хотя как по мне лучше ничего чем такой изврат.
Единственная идея которая мне еще приходит это создавать картинку брауза как дочерний объект объекта инпута файлового, то есть чтобы клик картинки автоматически баблом передавал инпуту событие клика. Но это решение чисто теоретическое и я даже не знаю как его реализовать - я на скрипте объекты друг из друга еще ни разу не создавал. И что работать будет не уверен.
Есть правда еще одна идея - ну ненормально то что явный вызов клика не работает, тут одно из друх - либо в опере за это отвечает другая функция, не click а какой нибудь brows, view или еще что, надо найти и почитать спецификацию конкретно оперного джаваскрипта. Либо дело в невидимости объекта, можно вместо того чтобы задавать ему невидимость задать ему абсолютные координаты за пределами видимой области экрана с самым низким показателем леера, или с тем же самым низким показателем пихнуть его под что то с более высоким z-indexом, но не задавая явно невидимости.

@Toller · 12.12.2006, 03:40 **[ТС]**

ну что я могу сказать... дело тут не в невидимости - факт. я пытался открыть видимость (на время разработки все поплыло ну и пусть...) и просто сделать тоже самое - не получилось. click - не работает!!!
что касается других методов, то даже не знаю где почитать. может задать вопрос разработчика Oper-ы? Да за одно и разработчикам FireFox-а... Таже байда - не работает

Всем большое спасибо за обсуждение! Если я найду выложу решение сюда

12.12.2006, 13:50

Стоило всего лишь немного погуглить:
http://4matic.wordpress.com/tag/javascript/ http://4matic.wordpress.com/tag/javascript/
вторая заметка</P>http://www.google.com.ua/search?hl=ru&q=%D0%BC%D0%B5%D1%82%D0%BE%D0%B4+clic k+%D0%B2+opera&meta http://www.google.com.ua/search?hl=ru&q=%D0%BC%D0%B5%D1%82%D0%BE%D0%B4+clic k+%D0%B2+opera&meta=

@Toller 0 / 0 / 0 Регистрация: 18.06.2009 Сообщений: 171
		1
	Java Script работает в IE, но не работает в Opera 03.12.2006, 14:10. Показов 6901. Ответов 17 Метки нет (Все метки) И так задача: Есть форма, на форме поле ввода типа "file". Нужно подменить кнопку "обзор" картинкой и отнести ее (картинку) подальше от основного поля ввода. Вот как я это сделал: <tr> <td background="imagesinput.gif" height="33" width="422 <input type="text" name="filename" style="width: 415; </td> <td width="70 </td> <td width="150" align="right <div style="visible:false; display:none; <input type="file" name="dialog" onChange="filename.value=dialog.value; </div><a href="javascript: p2m.dialog.click(); <img src="imagesrowse.gif </a></td> </tr> Т.е. поле ввода типа файл - невидимое. Окно диалога выбора файла вызывает при кликаньи мышкой по изображению: <a href="javascript: dialog.click(); <img src="imagesrowse.gif </a>. При каких-то изменениях в текстовом поле типа file текст этого поля передается в текстовое поле filename: <input type="file" name="dialog" onChange="filename.value=dialog.value; <STRONG>ПРОБЛЕМА ЗАКЛЮЧАЕТСЯ В ТОМ, ЧТО СКРИПТ РАБОТАЕТ В IE, НО НЕ РАБОТАЕТ В OPERE</STRONG>. Что я сделал не так??? Заранее благодарен. __________________ Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь 0

DarkSet
	04.12.2006, 13:47	2
	Если я не ошибаюсь то проблема в прямом обращении к полям, тут где то в моей теме одной писали что лучше использовать window.document.getElementById() - это точно и без ошибок отработает любой броузер. Ищет как по ИД так и по имени

@Toller 0 / 0 / 0 Регистрация: 18.06.2009 Сообщений: 171
	04.12.2006, 21:30 [ТС]	3
	не работает!!! Не выходит каменный цветок... тьфу... т.е не появляется окошко... написал вот так: window.document.getElementById('dialog').click(); а результат тот же, но ошибку не выдает. и FireFox мозг компосирует Что еще может быть? Большое спасибо за то, что откликнулся!!! 0

DarkSet
	05.12.2006, 13:32	4
	Лично у меня ни одна джаваскриптовая функция еще не принимала параметры заключенные в одинарные кавычки, только в двойные. Может быть это только у меня такая проблема, но ты всетаки проверь ) Вообще чтобы не путаться хорошая как мне кажется привычка атрибуты ХТМЛ тегов заключать в одинарные кавычки, а джаваскриптовые строки в двойные, а то напишешь к примеру <button onclick='getElementById('element_id')'> и что думаешь - сработает? Щас, преобразуется тут же в <button onclick='getElementById(' element_id')'> и вторую часть смело проигнорирует как неопознанный атрибут, а первую - как неправильное действие

@Toller 0 / 0 / 0 Регистрация: 18.06.2009 Сообщений: 171
	05.12.2006, 14:14 [ТС]	5
	ну а у меня наоборот: сначала двойные кавычки, потом одинарные. думаю, что это не принципиально. но все равно не работает. что тут еще может быть? 0

DarkSet
	05.12.2006, 16:16	6
	Так, скорее всего проблема гдето тут <a href="javascript: dialog.click(); <img src="imagesrowse.gif </a> Я в общемто не очень понимаю что значит javascript: p2m.dialog.click() , просто незнакомая форма записи, но попробуй переписать это как <img src="imagesrowse.gif" onclick='dialog.click()'> ну и конечно прямые обращения к именам замени всеже на вызов функции как я писал в начале

@Toller 0 / 0 / 0 Регистрация: 18.06.2009 Сообщений: 171
	05.12.2006, 19:18 [ТС]	7
	да, сегодня подобная мысль меня уже посещала. я попробовал сделать обработчик события onclick - та же барадаааа. в IE работает, в Opera Or FireFox - не фига. Заказчик уже обещает порвать пасть... Может тоже настройки? 0

DarkSet
	05.12.2006, 20:08	8
	фиг его разберет. Приведи всю рабочую часть от <form> до </form> попробуй убрать visible, оставь только display : none поменяй все обращения по идешникам напрямую на то что я сказал через функции и продублируй имена идшниками поменяй одинарные кавычки в джаве на двойные и соответственно в ХТМЛ наоборот чтобы было правильно Поменяй все имена и ИДшники компонентов, вообще все переменные имена которые ты используешь на имена вида my_имя, может быть где то какой то внутренний параметр захватил нечаянно. Если все это вместе не дало ефекта попробуй использовать другой обработчик событий:http://xpoint.ru/know-how/JavaScript/PoleznyieFunktsii#NaznachenieNeskol'kihObrabotch http://xpoint.ru/know-how/JavaScript/PoleznyieFunktsii#NaznachenieNeskol'kihObrabotch Перепроверь код на наличие опечаток или мелких глюков, ИЕ их пропускает, а вот оперы и файерфоксы могут и не пустить. И напиши наконец какая ошибка пишется, если пишется какая то? А еще лучше дай линк на эту страницу, эсли это возможно )

@Toller 0 / 0 / 0 Регистрация: 18.06.2009 Сообщений: 171
	06.12.2006, 17:10 [ТС]	9
	Ну хорошо... А как тогда по другому сделать то, о чем я говрил в начале: а именно изменить вид поля типа file для uploading? 0

@bazile 85 / 61 / 69 Регистрация: 15.03.2007 Сообщений: 6,908
	06.12.2006, 17:23	10
	Попробуй такой http://www.quirksmode.org/dom/inputfile.html вариант. Правда если верить комментариям к этой статье, то код не работает в Opera и в ie7 есть проблемы. Не знаю так это или нет. 0

Опции темы

DarkSet
	06.12.2006, 18:49	11
	По моему способ глупый довольно. Да и в первом посте явно ж сказано - проблема в том что в Опере не работает ) В ИЕ и так все в порядке ) Нет, ну идея забавная, но достаточно посмотреть на картинку приведенную в статье которая показывает разные браузеры и мы поймем что с сафари ничего не выйдет в принципе, там кнопка посредине, а с другими будут глюки с размером кнопки. Единственное что я там почерпнул интересного: <SPAN class=smaller>(Note that you can't use <CODE>visibility: hidden</CODE>, because a truly invisible element is unclickable, too, and we need the <CODE><input type="file </CODE> to remain clickable)</SPAN> То есть таки надо убрать visibility из кода и оставить display : none , возможно поэтому в опере не запускается метод click. Но это вилами по воде. Этого я вообще не понял там: One problem remains: the user can't choose not to upload a file after all. Suppose the user selects a file, then on second thought decides not to upload it. In a normal <CODE><input type="file </CODE> he can simply remove the path, and the file won't be uploaded. In our example, though, this is very difficult. Try it, it can be done, but it's totally counter-intuitive. то есть так проблематично поставить на onchange нашего фейкового инпута изменение значения инпута файлового? Или чтобы не попасть в вечную рекурсию на onKeyPressed, onKeyUp или еще куда?

@bazile 85 / 61 / 69 Регистрация: 15.03.2007 Сообщений: 6,908
	06.12.2006, 19:25	12
	DarkSet (06.12.2006) Этого я вообще не понял там: One problem remains: the user can't choose not to upload a file after all. Suppose the user selects a file, then on second thought decides not to upload it. In a normal <CODE><input type="file </CODE> he can simply remove the path, and the file won't be uploaded. In our example, though, this is very difficult. Try it, it can be done, but it's totally counter-intuitive. Перевод: "Остается одна проблема: пользователь не может отказаться от загрузки файла. Представим, что пользователь выбрал файл, но затем решает отказаться от его загрузки. В обычном <input type="file он может просто удалить путь и файл не будет загружен. В нашем же примере это сделать сложно. Попробуйте, это можно сделать, но это будет запутанное решение". 0

DarkSet
	06.12.2006, 20:41	13
	Не, ты не понял Я понял что написано, я не понял в чем сложность - решение ведь елементарное, я его написал. Какой то этот автор.. не очень.. )

@bazile 85 / 61 / 69 Регистрация: 15.03.2007 Сообщений: 6,908
	06.12.2006, 21:02	14
	Дело в том что присвоить значение <input type=file> из скрипта нельзя. Из соображений безопасности. 0

@Toller 0 / 0 / 0 Регистрация: 18.06.2009 Сообщений: 171
	07.12.2006, 17:42 [ТС]	15
	ну не все же такие Гуру!!! Можно все-таки попросить конкретный рецепт? P.S. Заранее всем спасибо за деятельное участие в моей проблемке 0

DarkSet
	11.12.2006, 13:55	16
	Видимо рецепта действеннее предложеного безилом нет. Хотя как по мне лучше ничего чем такой изврат. Единственная идея которая мне еще приходит это создавать картинку брауза как дочерний объект объекта инпута файлового, то есть чтобы клик картинки автоматически баблом передавал инпуту событие клика. Но это решение чисто теоретическое и я даже не знаю как его реализовать - я на скрипте объекты друг из друга еще ни разу не создавал. И что работать будет не уверен. Есть правда еще одна идея - ну ненормально то что явный вызов клика не работает, тут одно из друх - либо в опере за это отвечает другая функция, не click а какой нибудь brows, view или еще что, надо найти и почитать спецификацию конкретно оперного джаваскрипта. Либо дело в невидимости объекта, можно вместо того чтобы задавать ему невидимость задать ему абсолютные координаты за пределами видимой области экрана с самым низким показателем леера, или с тем же самым низким показателем пихнуть его под что то с более высоким z-indexом, но не задавая явно невидимости.

@Toller 0 / 0 / 0 Регистрация: 18.06.2009 Сообщений: 171
	12.12.2006, 03:40 [ТС]	17
	ну что я могу сказать... дело тут не в невидимости - факт. я пытался открыть видимость (на время разработки все поплыло ну и пусть...) и просто сделать тоже самое - не получилось. click - не работает!!! что касается других методов, то даже не знаю где почитать. может задать вопрос разработчика Oper-ы? Да за одно и разработчикам FireFox-а... Таже байда - не работает Всем большое спасибо за обсуждение! Если я найду выложу решение сюда 0

DarkSet
	12.12.2006, 13:50	18
	Стоило всего лишь немного погуглить: http://4matic.wordpress.com/tag/javascript/ http://4matic.wordpress.com/tag/javascript/ вторая заметка</P>http://www.google.com.ua/search?hl=ru&q=%D0%BC%D0%B5%D1%82%D0%BE%D0%B4+clic k+%D0%B2+opera&meta http://www.google.com.ua/search?hl=ru&q=%D0%BC%D0%B5%D1%82%D0%BE%D0%B4+clic k+%D0%B2+opera&meta=