Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.07.2012, 14:39
Интересующийся
Отправить личное сообщение для dizent Посмотреть профиль Найти все сообщения от dizent
 
Регистрация: 06.07.2012
Сообщений: 13

Проверка 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>


Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 06.07.2012, 15:10
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

http://www.wisdomweb.ru/JS/formval.php
Ответить с цитированием
  #3 (permalink)  
Старый 06.07.2012, 15:41
Интересующийся
Отправить личное сообщение для dizent Посмотреть профиль Найти все сообщения от dizent
 
Регистрация: 06.07.2012
Сообщений: 13

Знаю я эти формы уже баловался... я так и не смог "набаловаться" с файлами что бы их проверяло, все, т.к. используется html5 multiple
Ответить с цитированием
  #4 (permalink)  
Старый 06.07.2012, 15:53
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

dizent,
суть в этом участке кода = <form name="form" onsubmit="return validate()">
Вот в этой функции всё и проверяете или нужна сама регулярка на проверку типов ?
Ответить с цитированием
  #5 (permalink)  
Старый 06.07.2012, 18:44
Аватар для razerxxx
Аспирант
Отправить личное сообщение для razerxxx Посмотреть профиль Найти все сообщения от razerxxx
 
Регистрация: 05.10.2011
Сообщений: 84

Сообщение от Deff Посмотреть сообщение
dizent,
суть в этом участке кода = <form name="form" onsubmit="return validate()">
Вот в этой функции всё и проверяете или нужна сама регулярка на проверку типов ?
Судя по всему, dizent, просто не знает как проверить именно <input type='file' />. Вообще проверить можно, но только в современных браузерах. Гуглите html5 file api
http://habrahabr.ru/post/140695/ - вот тут, например, читают mp3 файл, без загрузки на сервер.
Ответить с цитированием
  #6 (permalink)  
Старый 06.07.2012, 18:46
Аватар для razerxxx
Аспирант
Отправить личное сообщение для razerxxx Посмотреть профиль Найти все сообщения от razerxxx
 
Регистрация: 05.10.2011
Сообщений: 84

http://blueimp.github.com/jQuery-File-Upload/ - вот еще - мультизагрузка файл. Миниатюры отображаются без загрузки на сервер. Можете попробовать посмотреть исходники
Ответить с цитированием
  #7 (permalink)  
Старый 06.07.2012, 20:00
Интересующийся
Отправить личное сообщение для dizent Посмотреть профиль Найти все сообщения от dizent
 
Регистрация: 06.07.2012
Сообщений: 13

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

Все, а медиа типы и более сложные проверки проведет php...
Ответить с цитированием
  #8 (permalink)  
Старый 06.07.2012, 21:07
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

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
==================================
Чуть поправил

Последний раз редактировалось Deff, 07.07.2012 в 02:11.
Ответить с цитированием
  #9 (permalink)  
Старый 08.07.2012, 22:52
Интересующийся
Отправить личное сообщение для dizent Посмотреть профиль Найти все сообщения от dizent
 
Регистрация: 06.07.2012
Сообщений: 13

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

up: не нашел в опциях "закрыть", так что: Модераторы закройте плз тему
Ответить с цитированием
  #10 (permalink)  
Старый 09.07.2012, 18:02
Профессор
Отправить личное сообщение для tadjik1 Посмотреть профиль Найти все сообщения от tadjik1
 
Регистрация: 07.06.2011
Сообщений: 315

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

Последний раз редактировалось tadjik1, 09.07.2012 в 18:04.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вызов события для input file ArmagedDance jQuery 4 17.02.2013 08:39
Opera, input file, div tabindex autosoft Events/DOM/Window 31 04.07.2012 01:45
Проверка value у input js bartle96 jQuery 2 31.05.2012 08:41
[newbie question] input (file) -> submit -> php(json) zatoichi AJAX и COMET 1 18.01.2011 11:18
Обработка нескольких file input Temlekur Работа 8 21.01.2010 17:30