Как имитировать нажатие на ввод файла? - PullRequest
Новая
       9

Как имитировать нажатие на ввод файла?

1 голос
/ 26 февраля 2012

HTML: 

<div class="fileinputs">
    <input type="file" name="postgallery_set-0-image_0" id="id_postgallery_set-0-image_0">
    <div class="fakefile">
        <img src="/img/image_choice.png" />
    </div>
</div>

CSS: 

div.fileinputs {
            position: relative;
        }

        div.fakefile {
            top: 0px;
            left: 0px;
            z-index: 1;
            cursor: pointer;
        }

        .fileinputs input {
            position: relative;
            text-align: right;
            -moz-opacity:0 ;
            filter:alpha(opacity: 0);
            opacity: 0;
            z-index: 2;
        }

И JS: 

$('.fakefile').click(function() {
    $(this).parent().children('input').click();
});

Это прекрасно работает в Chrome и Firefox.
В IE8 происходит следующее: все работает нормально, но при отправке формы файл ввода очищается, форма не отправляется и курсор помещается на скрытый файл ввода, как заставить его работать в IE?

1 Ответ

0 голосов
/ 26 февраля 2012

Вам на самом деле не нужен JS для достижения этого эффекта. HTML <label> s только для такого рода вещей. например, 

<div class="fileinputs">
  <input type="file" name="postgallery_set-0-image_0" id="id_postgallery_set-0-image_0">
  <label for="id_postgallery_set-0-image_0">
    <img src="/img/image_choice.png" />
  </label>
</div>
...