Форум

bayrach · #1 (**permalink**) 25.09.2012, 21:22

К обычной форме есть необходимость прикреплять файл, сам input type file прячется стилями, поэтому вызываю окно выбора файла кликом по ссылке через js:

$('.link').click(function(){
    $('.fileInput').click(); // Открываем окно выбора файла
})

Кликаем, открываем окно, выбираем файл, всё вроде бы ок, но при сабмите формы в ie7/8, форма не отправляется, ничего не происходит. Но если проделать такой же алгоритм, только выбирая файл не по клику по ссылке, а через родной input type file , то форма отправляется как надо...

walik · #2 (**permalink**) 25.09.2012, 22:05

Я проверил у себя в IE 8 и форма нормально отправлялась. Возможно у вас там с обработкой событий какая то путаница ?

На таком коде тестил:

<!DOCTYPE HTML>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  </head>
  <body>
    <form action="ii.php">
      <input type="file" style="display: none;" class="fileInput" />
      <span class="link">Select file</span>
      
      <input type="submit" value="submit" />
    </form>
    <script>
      $('.link').click(function() {
      	$('.fileInput').click();
      });
    </script>
  </body>
</html>

bayrach · #3 (**permalink**) 25.09.2012, 22:23

У меня вот как происходит, жму сабмит формы, при этом очищается значение поля input type file и ничего не происходит, жму сабмит 2-й раз и вот только потом форма отправляется с пустым значением поля input type file, никаких обработчиков больше нет, сломал голову, что в этой элементарной проблеме не так....

walik · #4 (**permalink**) 25.09.2012, 22:31

Мой пример, выше, у вас нормально работает в ИЕ ?
Если да, то покажите код на вашей странице (заранее сократив его, что бы можно было узреть проблему и не отвлекаться на лишнее), или ссылку на страничку

bayrach · #5 (**permalink**) 25.09.2012, 23:49

Если в вашем примере input type file добавить атрибут name, то форма также как у меня не отправляется...

walik · #6 (**permalink**) 26.09.2012, 00:27

мде.. судя по всему, ИЕ не нравится симуляция клика, как вариант могу предложить использовать label:

<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
    <form>
      <label for="myFile">Select File</label>
      
      <div style="width: 0px;height: 0px;overflow: hidden;display: inline-block;">
      	<input type="file" name="myFile" id="myFile" />
      </div>
      
      <input type="submit" value="submit" />
    </form>
  </body>
</html>

bayrach · #7 (**permalink**) 26.09.2012, 01:02

Работает в IE8, но в IE7 не срабатывает label for

walik · #8 (**permalink**) 26.09.2012, 14:04

Хммм, пример выше у меня и в ИЕ 7 тоже работает.

bayrach · #9 (**permalink**) 26.09.2012, 14:14

Неа, еще раз проверил, в IE7 упорно не работает (забить на IE7 не могу), поэтому в качестве кроссбраузерного решения выбрал способ наложения текста и input type file друг на друга с помощью opacity: 0 и пары мелких трюков, решение было дернуто отсюда http://blueimp.github.com/jQuery-File-Upload/ (см. стили кнопки "Add Files")
P.s. IE7 тестил сперва в IETestere, затем в оригинальной сборке, в обоих случаях результат был одинаковый, затем потестил в IE9 (в режиме IE7) так да, работает, но мне нужна поддержка настоящего IE7

Форум

Справочник

Discord чат

Курсы javascript