Проверка input file
 

Вообщем хотел бы у Вас узнать как выполнить проверку с помощью JS(jQuery) проверку input file.

Проверка должна содержать расширение файла и если возможно его вес без загрузки на сервер.

Мой код:

<div class="rightUpload"><div class="upload"><input type="file" size="1" title="Загрузить файл (JPG / MP3 / MP4 - до 30MB)" multiple="true" name="photo"></div></div>

В случае ошибки код должен стань примерно таким:

<div class="rightUpload"><div class="upload error"><input type="file" size="1" title="Загрузить файл (JPG / MP3 / MP4 - до 30MB)" multiple="true" name="photo"></div></div>

* div.error после div.upload

В случае отсутствия ошибок стать примерно таким:

<div class="rightUpload"><div class="upload success"><input type="file" size="1" title="Загрузить файл (JPG / MP3 / MP4 - до 30MB)" multiple="true" name="photo"></div></div>

* div.success после div.upload

Весь код:

<form action="?" method="get" enctype="multipart/form-data">
  <div class="left"><input type="text" autocomplete="off" placeholder="Оставить комментарий" class="message" name="message"></div>
  <div class="rightSubmit"><div class="submit"><input type="submit" size="1" title="Отправить сообщение" name="sayMessage"></div></div>
  <div class="rightUpload"><div class="upload"><input type="file" size="1" title="Загрузить файл (JPG / MP3 / MP4 - до 30MB)" multiple="true" name="photo"></div></div>
</form>

Заранее спасибо!

Знаю я эти формы уже баловался... я так и не смог "набаловаться" с файлами что бы их проверяло, все, т.к. используется html5 multiple

dizent,
суть в этом участке кода = <form name="form" onsubmit="return validate()">
Вот в этой функции всё и проверяете или нужна сама регулярка на проверку типов ?

Судя по всему, dizent, просто не знает как проверить именно <input type='file' />. Вообще проверить можно, но только в современных браузерах. Гуглите html5 file api
http://habrahabr.ru/post/140695/ - вот тут, например, читают mp3 файл, без загрузки на сервер.

http://blueimp.github.com/jQuery-File-Upload/ - вот еще - мультизагрузка файл. Миниатюры отображаются без загрузки на сервер. Можете попробовать посмотреть исходники

Я нуб в js, и мне по странным стечением обстоятельств сложно его понять... Так, что мой арсенал, php и css.
Deff, мне надо самый, что именно простой код который проверят каждый файл добавленный на загрузку, и в случае если вес файла более 30мб или его расширение не mp3, jpg, mp4, добавлялся div error, если все файлы прошли проверку то div success

Все, а медиа типы и более сложные проверки проведет php...

dizent,
Проверить кроссбраузерно величину файла на клиенте - вряд ли удастся
но какой то прибабах воткнул (типо скрытого поля) "MAX_FILE_SIZE"

<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>


<form id=MyForm action="?" method="get" enctype="multipart/form-data"  onsubmit="return validate()">
  <p class="upload">

      <p>Загрузить файл (JPG / MP3 / MP4 - до 30MB)</p>

      <input type="hidden" name="MAX_FILE_SIZE" value="30000000" />

      <input size="20" type="file" size="1" title="Загрузить файл (JPG / MP3 / MP4 - до 30MB)"  name="photo" onchange="tstFile(this)" multiple="true">
  </p>

  <br />

  <span class="left"><input type="text" autocomplete="off" placeholder="Оставить комментарий" class="message" name="message"></span>

  <span class="rightSubmit"><input type="submit" size="1" title="Отправить сообщение" name="sayMessage"></span>

  <input id="Reset" type="reset" style="/*display:none*/">

</form>


<script type="text/javascript">
var FLAG = true;
function validate() {
  return FLAG;
}

function tstFile(val){
  var v = val.value;
  var v = v.search(/^.*\.(?:jpg|jpeg|mp3|mp4)\s*$/ig)
  if(v!=0){
     alert("Неправильный формат файла\n Форма будет очищена");
     $('#Reset').click();
  }

}
</script>

функция
function validate() {
return FLAG;
}
пока не использована - но она запретит отправку при сбросе FLAG в false
==================================
Чуть поправил

спасибо... правда мне мало толку представляет этот код...:blink:
яж его почти не понимаю...
вообщем тему закрываю(если есть таковая возможность:D), я буду юзать html5 file api:dance:

up: не нашел в опциях "закрыть", так что: Модераторы закройте плз тему

можете повесить обработчик на чендж ипнута, а затем вытащить из e.srcElement.files или e.target.files и имя, и размер, и кроссбраузерно