2013-05-30 1 views
0

Я пытаюсь получить более перспективную входной файл элемент формы с начальной загрузкой, используя невидимый элемент example с кодом (упрощенным), как:Невидимых Входной файл элемент не работает с яваскриптом

<div class="container"> 
    <form enctype="multipart/form-data" action=""> 
    <input class="hide" id="filesel" type="file" /> 
    <div class="input-append"> 
     <input id="filename" class="input-large" type="text" /> 
     <a class="btn" onclick="testFun();">Browse</a> 
    </div> 
    </form> 
</div> 

<script type="text/javascript"> 
    $('input[id=filesel]').change(function() { 
    $('#filename').val($(this).val()); 
    }); 

    function testFun(){ 
    inp = $("#filesel").click(); 
    } 
</script> 

Но это Безразлично» t работает должным образом. Если я удалю класс hide в тег ввода файла, он будет работать. Как я могу это решить?

UPDATE 1: протестирована более навигаторов:

  • Ubuntu Хром 18,0 -> Не удается
  • Ubuntu Firefox 16,0 -> Работы

Мои в хроме hide или style="display: none" влияет также в окне «Обзор файлов».

+0

Что связано с вашим классом 'hide'? js-действия? css? – LeGEC

+0

также обратите внимание, что не все браузеры возвращают значение для поля ввода файла. Поэтому планируйте эту неудачу в браузерах, таких как IE. И некоторые браузеры не позволяют вам имитировать щелчок на элементе управления входным файлом, а также –

ответ

1

Установка display:none; не будет работать с вводом файлов. Хотя вы можете установить visibility:hidden; или opacity:0; Существует также хороший учебник о вводе файлов стилей. here

+0

Хорошо с положением 'style =": absolute; visibility: hidden; "/' Я получаю его работу. – Zhen

0

Что произойдет, если вы удалите свой класс hide и добавьте style="display: none" (в соответствии с примером)?

Смежные вопросы