HTML+CSS+JavaScript

Добрый вечер.
Сразу говорю, что с javascript только начал разбираться.
Вот сделал проверку данных и загрузку файла, возникли некоторые вопросы,
сам код прилагаю(архив, два файла), что бы не занимал место в топике.
Вопросы :
1) Можно ли и безопасно ли проверять соответствие кода каптчи на стороне клиента?
сделал проверку, но что то плохо работает.
в сессионом файле, в функции и на картинке полное соответсвие, но всё равно выдаёт предупреждение о несоотвествии.
2)Можно ли средствами js проверить объём загружаемого файла и как можно выделить расширение файла?(поиском на форуме не нашёл.)
это нужно для функции проверки загружаемого файла, пока я смог сделать проверку выбран файл или нет.
3)Как можно ограничить кол-во загружаемых файлов?(поиском на форуме пока не нашёл.)
надо сделать как на mail.ru, при отправке писем с вложением, напрамер, надо что бы можно было прикрепить не более 3-х файлов и выводить имена файлов рядом с формой.
Хотелось бы услышать замечания по написаному коду, как лучше сделать, что исправить и т.д.
Заранее благодарю откликнувшихся...

Пробовал загрузку файлов в IE , Mozilla - перекидывает на файл обработчик загрузки, только в Opera без перегрузки страницы работает, подскажите, пожалуйста, как исправить?

1. Проверять на сервере.
2. Узнавать на сервере.
3. Отсекать на сервере.

а по поводу не работы в других браузерах, отличными от OPERA, как можно исправить?

Что исправить? Вы что хотите проверять каптчу на клиенте, запрещать закачивать сверх положенного тоже на нем? И каким образом на клиенте вы узнаете размер загружаемого?

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

>Что исправить? Вы что хотите проверять каптчу на клиенте, запрещать закачивать сверх положенного тоже на нем? И каким образом на клиенте вы узнаете размер загружаемого?

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

Нет, нет метода в JS, который бы вам позволил узнать объем. Да и не в этом дело, пусть бы и был, разве можно доверять такие проверки клиенту? Если вы будете проверять на клиенте то, что вас интересует, то можете считать, что будете получать от него гарантированное ОК. Ведь на клиенте можно все подправить, и проверку на клиенте методами JS можно считать как сервис для удобства порядочных пользователей, но никак средство защиты от непорядочных.

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

Объясните ВНЯТНО, что вы подразумеваете под словом "нормально".

Расскажите, что должно получиться В ИДЕАЛЕ.
1. Какие поля (имена) каких форм (имена) пользователь должен заполнить.
2. Какую кнопку (имя) какой формы (имя) он должен нажать после заполнения полей.
3. Какие изменения в результате нажатия на кнопку должны произойти на странице (с именами полей, окошков и сообщений).
4. Что должен далее делать пользователь (опять с указанием всех имён полей и форм).
...

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

>1. Какие поля (имена) каких форм (имена) пользователь должен заполнить.

поле типа file(выбрать файл), с этим проблем нет, в IE, Mozila работает,если файл не выбран появляется надпись "файл не выбран".

>2. Какую кнопку (имя) какой формы (имя) он должен нажать после заполнения полей.

кнопку "прикрепить" (name="attach") , форма одна (name="mailForm")

>3. Какие изменения в результате нажатия на кнопку должны произойти на странице (с именами полей, окошков и сообщений).

После нажания кнопки "прикрепить" , обрабатывается только поле типа file, появляется "экран" загрузки, картинка в формате .gif и надпись "идёт загрузка", после завершения загрузки появляется надпись "файл загружен".

>И затем укажите конкретно - на каком из этапов и в каком из браузеров у вас что-то (опять же с именами конкретных полей и форм) из ожидаемого не происходит.

в IE и Mozilla "экран" загрузки файла появляется, но по завершению работы скрипта надпись "файл загружен" не появляется, а перекидывает на обработчик загрузки файла на сервер(upload1.php), в Opera работает нормально, т.е. появляется "экран" загрузки, после загрузки файла надпись "файл загружен".

так и ни кто не может помочь?

<form name="mailForm" action="upfile.php" method="post" TARGET="hiddenframe" enctype="multipart/form-data" ONSUBMIT="здесь можно единым обработчиком все обрабатывать">

Это не для проверки, это для ввода:

<input type="text" name="keystring">

и это к нему, удалить:

// проверка кода каптчи if(name == "keystring" && value != ""){   if(ses != "" && ses != value){     document.all.err.innerHTML = "Введён не верный код.";     return false;   } }

Почему два фрейма?
<iframe id="hiddenframe" name="hiddenframe" style="width:0; height:0; border:0"></iframe>

document.all коллекция только для IE.

Проверку каптчи я уже удалил.
по поводу единого обработчика не понял, можно чуть подробней объяснить?

>document.all коллекция только для IE.

Вы имели ввиду вот это
document.all.err.innerHTML = "......"; ?

тогда как будет правильно для остальных браузеров прописать?

Зачем по нескольку раз отправлять каждый пункт формы?
Вы выдаете пользователю форму, в которой есть условие на заполнение обязательных полей. Пользователь заполняет (или не заполняет) и отправляет ее. У формы есть событие onsubmit, в котором и начинаем проверку:
1. Все ли обязательные поля заполнены? Если нет, возврат. Если пользователь подправит скрипт, и все таки отправит ее пустой, то эту же проверку необходимо делать на сервере.
2. Если все поля заполнены, проверяем корректность ввода. Если адрес введен не корректно, возврат. Аналогично, если подправили и отослали, то проверяем адрес и на сервере.
3. Все поля заполнены и корректно. Идет отправка, выдаем сообщение. Сервер проверяет данные, включая загрузку изображения (если оно было).
4. Если есть ошибки возвращаем форму назад, с заполненными данными (исключая поле ввода изображения, если оно удачно загружено, ну, или, либо заставляем опять выбирать его, игнорируя удачную загрузку), для работы над ошибками.

Это ведь можно проверить в одном обработчике? Зачем куча кнопок submit?

getElementById() будет корректно работать во всех браузерах, это и используйте.

>Почему два фрейма?

если честно, то передрал пример и пытался переделать его под свои нужды, получилось пока не очень хорошо, т.к. js учу только третий день, до многого пока в учебнике не дочитал, а начал я его читать сначала :):):) , да и издание старенькое.
так что уж звиняйте если вопросы покажутся Вам глупыми...

>Это ведь можно проверить в одном обработчике? Зачем куча кнопок submit?

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

Ах вот что вы делаете. Ну тогда был бы резон посмотреть код майла, там AJAX используется, но коли вы всего три дня....
Можно и фреймом это сделать. На www.javascript.ru есть хорошие статьи подобного обмена клиента с сервером, зайдите, почитайте.

конечно же я исходный код страницы посмотрел, увидел там два submit, из этого и исходил.

Ну только двух submit мало, нужен механизм :) Зайдите на javascript.ru, очень полезные статьи там, с примерами.

зашёл, буду изучать, спасибо.

Посетил рекомендованые сайты, посмотрел, почитал, попытался разобраться и ... зашёл в тупик, прошу помощи.
попытался использовать технологию аякс, асинхронные запросы, вроде в чём то разобрался, но до конца додумать не смог.
решил начатьс малого, проверка кода каптчи на стороне сервера, вот код, как это я себе представляю

<html>  <head> <script type="text/javascript"> function getXmlHttp(){   var xmlhttp;   try {     xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");   } catch (e) {     try {       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");     } catch (E) {       xmlhttp = false;     }   }   if (!xmlhttp && typeof XMLHttpRequest!='undefined') {     xmlhttp = new XMLHttpRequest();   }   return xmlhttp; } </script> </head> <body> <?php error_reporting(E_ALL); if(!empty($_POST)){ print_r($_POST);  if(isset($_SESSION['captcha_keystring']) && $_SESSION['captcha_keystring'] == $_POST['keystring']){   echo "Верный код каптчи.";  }  else{   echo "Не верный код каптчи. ".$_POST['keystring'];  } } ?> <script type="text/javascript">  // проверка каптчи function test(form){     if(form.elements[3].name == "keystring" && form.elements[3].value != ""){     var ans = getXmlHttp();     var statElem = document.getElementById('err');     var param = form.elements[3].value;           ans.onreadystatechange=function(){       if(ans.readyState == 4){         /*statElem.innerHTML = ans.statusText;*/         if(ans.status == 200){         /*alert('Ответ :'+ans.responseText);*/         statElem.innerHTML = "Не верный код каптчи.";         document.getElementById('img').src="kcaptcha/index.php?<?php echo session_name()?>=<?php echo session_id()?>"+Math.random();         }       }      }            ans.open('POST','upfile.php',true);      ans.setRequestHeader('Content-Type','application/x-www-form-urlencoded');      ans.send(param);      statElem.innerHTML = "...Идёт загрузка...";   }   else{   document.getElementById('err').innerHTML = "Не заполнено поле антиспамкода.";   return false;   }   return true;   form.submit(); } </script> <!-- Вывод сообщений о незаполненый полях и не верном коде каптчи --> <div id="err" class="div" style="color:#f00; font-style:italic;"></div> <form name="mailForm" method="post"> Имя : <input type="text" name="name"><br> E-mail : <input type="text" name="email"><br> Текст : <textarea name="text" cols="15" rows="5"></textarea><br> Спамкод : <input type="text" name="keystring"><br> <input type="button" onClick="return test(this.form)" value="Отправить"> </form> </body> </html>

обработчик формы и сама форма распологаются в одном файле.
вроде бы и работает, но не так как хотелось бы.

если использовать в input type=submit onSubmit, то асинхронного запроса не получается, при проверке кода перегружается вся форма, а если делать так как я представил выше, то при правильном коде каптчи не идёт отправка на сервер, а всё равно пишет, что код каптчи не верный.
подскажите, пожалуйста, как сделать правильно работоспособный код?
заранее благодарю.