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

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

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

<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'
        });
    });
});

click jquery eventtrigger jquery-forms-plugin
person laukok    schedule 20.08.2011    source источник
comment
возможный дубликат Эмуляция щелчка загрузки файла в jQuery   -  person BradleyDotNET    schedule 07.03.2015

Ответы (4)


arrow_upward
18
arrow_downward

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

и я изменил триггер на щелчок:

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

Обоснование:

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

person Joe    schedule 20.08.2011
comment
У меня работал javascript. Но не могли бы вы сказать мне, почему это сработало, а простой $(input[type=file]).click() не работает? - person Prakash Raman; 10.04.2013
comment
Спасибо, хотя в моем случае виден элемент формы. Все еще не могу прикрепить к нему прямой щелчок. - person Prakash Raman; 16.04.2013

arrow_upward
3
arrow_downward

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

<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>
person link0047    schedule 08.10.2015

arrow_upward
2
arrow_downward

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

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

person Neal    schedule 25.06.2012
comment
Вы уже нашли решение? У меня похожая проблема, и мне нужно найти что-то, что работает в разных браузерах. - person newshorts; 24.05.2014

arrow_upward
0
arrow_downward 

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

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

person Omkar Frozen    schedule 03.01.2019