JQuery триггер: как я могу вызвать просмотр файла на входе, когда я нажимаю на текстовую ссылку?

Question

После этого сообщения у меня есть другой издатель - как я могу вызвать файл обзора во входе, когда я нажимаю на текстовую ссылку?

Обычно я хочу скрыть форму, но она будет активирована при нажатии на ссылку для загрузки текста.

<a href="#" class="upload">upload</a>
<form action="upload.php" method="post" enctype="multipart/form-data" id="myForm" style="display:none;">
  <input type="file" multiple="multiple" name="file[]" />
  <input type="submit" name="upload" value="Submit"/>
</form>
<div id="output"></div>

Это мой рабочий код Javascript:

$(document).ready(function(){
    $('.upload').click(function(){
        $(this).trigger($('input[type=file]'));
        return false;
    });

    $('input[type=file]').change(function() {
        $('#myForm').ajaxSubmit({
               target: '#output'
        });
    });
});

Answer 1

Вы не можете использовать style="display:none;" использовать style="visibility:hidden;"

, и я изменил триггер для нажатия:

$('.upload').click(function(){
    $('input[type=file]').click();
    return false;
});

Причина :

Поля ввода не будут отправлены на сервер с display:none, но будут с visibility:hidden.

Answer 2

почему вы не используете вместо этого ярлык? тогда вы можете использовать для атрибута.

<style type="text/css">
  #file_upload {
    visibility: hidden;
  }
</style>
<a href="#" class="upload">
  <label for="file_upload">upload</label
</a>
<form action="upload.php" method="post" enctype="multipart/form-data" id="myForm">
  <input id="file_upload" type="file" multiple="multiple" name="file[]" />
  <input type="submit" name="upload" value="Submit"/>
</form>
<div id="output"></div>

Answer 3

Метод Джо верен.Однако это решение будет работать только в некоторых браузерах.Он работает на Chrome и Firefox, но не на Opera, Safari или встроенном браузере Android Galaxy S (протестировано на текущих версиях по состоянию на 23 июня 2012 г.).Эти браузеры, вероятно, отключают запуск кнопки загрузки через JS по соображениям безопасности.

Я обновлю этот пост, если найду решение, которое работает во всех современных браузерах

Answer 4

<button>
  <label>
    select file
    <input type="file" style="visibility: hidden" file-handler>
  </label>
</button>

Это должно помочь вам