Ввод триггерного файла Jquery

Question

Ввод триггерного файла Jquery

Я пытаюсь вызвать окно загрузки (кнопка просмотра), используя jQuery.
Метод, который я попробовал сейчас:

$('#fileinput').trigger('click');

Но это не похоже на работу. Пожалуйста помоги. Спасибо.

181

javascript jquery css

Источник

user426996 27 апр '09 в 10:38

19 ответов

Другие вопросы по тегам javascript jquery css

user56449 04 сен '11 в 20:59 2011-09-04 20:59 · Answer 1 · 2011-09-04 20:59

Это связано с ограничением безопасности.

Я обнаружил, что ограничение безопасности только тогда, когда <input type="file"/> установлен в display:none; или visbilty:hidden,

Поэтому я попытался расположить его вне области просмотра, установив position:absolute а также top:-100px; и вуаля это работает.

см. http://jsfiddle.net/DSARd/1/

Назовите это взломать.

Надеюсь, что это работает для вас.

user440764 24 окт '11 в 01:08 2011-10-24 01:08 · Answer 2 · 2011-10-24 01:08

Это сработало для меня:

JS:

$('#fileinput').trigger('click');

HTML:

<div class="hiddenfile">
  <input name="upload" type="file" id="fileinput"/>
</div>

CSS:

.hiddenfile {
 width: 0px;
 height: 0px;
 overflow: hidden;
}

>>> Еще один, который работает кросс-браузер:<<<

Идея состоит в том, что вы накладываете невидимую огромную кнопку "Обзор" на свою пользовательскую кнопку. Поэтому, когда пользователь нажимает вашу пользовательскую кнопку, он фактически нажимает кнопку "Обзор" в поле ввода.

JS Fiddle: http://jsfiddle.net/5Rh7b/

HTML:

<div id="mybutton">
  <input type="file" id="myfile" name="upload"/>
  Click Me!
</div>

CSS:

div#mybutton {

  /* IMPORTANT STUFF */
  overflow: hidden;
  position: relative;   

  /* SOME STYLING */
  width:  50px;
  height: 28px;
  border: 1px solid green;
  font-weight: bold
  background: red;
}

div#mybutton:hover {
  background: green;
}

input#myfile {
  height: 30px;
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 100px;
  z-index: 2;

  opacity: 0.0; /* Standard: FF gt 1.5, Opera, Safari */
  filter: alpha(opacity=0); /* IE lt 8 */
  -ms-filter: "alpha(opacity=0)"; /* IE 8 */
  -khtml-opacity: 0.0; /* Safari 1.x */
  -moz-opacity: 0.0; /* FF lt 1.5, Netscape */
}

JavaScript:

$(document).ready(function() {
    $('#myfile').change(function(evt) {
        alert($(this).val());
    });
});

user7205737 14 дек '16 в 14:27 2016-12-14 14:27 · Answer 3 · 2016-12-14 14:27

Вы можете использовать элемент LABEL ex.

<div>
    <label for="browse">Click Me</label>
    <input type="file" id="browse" name="browse" style="display: none">//
</div>

Это вызовет входной файл

89

Источник

user7205737 14 дек '16 в 14:27

user334945 20 апр '12 в 00:41 2012-04-20 00:41 · Answer 4 · 2012-04-20 00:41

У меня это работает (= проверено) в IE8+, последние FF и Chrome:

$('#uploadInput').focus().trigger('click');

Клавиша фокусируется до нажатия кнопки (в противном случае Chrome игнорирует ее).

Примечание: вам НЕОБХОДИМО, чтобы ваш ввод был отображен и отображен (как в display:none и не visibility:hidden). Я предлагаю (как и многие другие раньше) абсолютно позиционировать вход и выбросить его за пределы экрана.

#uploadInput {
    position: absolute;
    left: -9999px;
}

user3302016 21 мар '14 в 09:48 2014-03-21 09:48 · Answer 5 · 2014-03-21 09:48

Проверьте мою скрипку.

http://jsfiddle.net/mohany2712/vaw8k/

.uploadFile {
  visibility: hidden;
}

#uploadIcon {
  cursor: pointer;
}

<body>
  <div class="uploadBox">
    <label for="uploadFile" id="uploadIcon">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Icon_-_upload_photo_2.svg/512px-Icon_-_upload_photo_2.svg.png"  width="20px" height="20px"/>
    </label>
    <input type="file" value="upload" id="uploadFile" class="uploadFile" />
  </div>
</body>

user1364612 19 апр '17 в 20:52 2017-04-19 20:52 · Answer 6 · 2017-04-19 20:52

Ради любопытства вы можете делать что-то, что хотите, динамически создавая форму загрузки и входной файл, не добавляя его в дерево DOM:

$('.your-button').on('click', function() {
    var uploadForm = document.createElement('form');
    var fileInput = uploadForm.appendChild(document.createElement('input'));

    fileInput.type = 'file';
    fileInput.name = 'images';
    fileInput.multiple = true;

    fileInput.click();
});

Нет необходимости добавлять uploadForm в DOM.

user1432074 02 июн '12 в 07:00 2012-06-02 07:00 · Answer 7 · 2012-06-02 07:00

adardesign обнаружил, что элемент ввода файла игнорируется, когда он скрыт. Я также заметил, что многие люди смещают размер элемента до 0 или выталкивают его за пределы границ с помощью настроек позиционирования и переполнения. Это все прекрасные идеи.
Альтернативный способ, который также, кажется, работает отлично, это просто установить непрозрачность на 0. Тогда вы всегда можете просто установить положение, чтобы оно не смещало другие элементы, как это делает Hide. Просто кажется немного ненужным смещать элемент почти на 10 тысяч пикселей в любом направлении.

Вот небольшой пример для тех, кто хочет:

input[type='file']{
    position:absolute;
    opacity:0;
    /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /* For IE5 - 7 */
    filter: alpha(opacity=0);
}

user997025 19 дек '12 в 12:23 2012-12-19 12:23 · Answer 8 · 2012-12-19 12:23

На самом деле, я нашел очень простой способ для этого, а именно:

$('#fileinput').show().trigger('click').hide();

Таким образом, в поле ввода вашего файла может отсутствовать свойство css и все равно выиграть сделку:)

5

Источник

user997025 19 дек '12 в 12:23

user1992857 19 янв '13 в 12:52 2013-01-19 12:52 · Answer 9 · 2013-01-19 12:52

Правильный код:

<style>
    .upload input[type='file']{
        position: absolute;
        float: left;
        opacity: 0; /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* For IE5 - 7 */
        filter: alpha(opacity=0);
        width: 100px; height: 30px; z-index: 51
    }
    .upload input[type='button']{
        width: 100px;
        height: 30px;
        z-index: 50;
    }
    .upload input[type='submit']{
        display: none;
    }
    .upload{
        width: 100px; height: 30px
    }
</style>
<div class="upload">
    <input type='file' ID="flArquivo" onchange="upload();" />
    <input type="button" value="Selecionar" onchange="open();" />
    <input type='submit' ID="btnEnviarImagem"  />
</div>

<script type="text/javascript">
    function open() {
        $('#flArquivo').click();
    }
    function upload() {
        $('#btnEnviarImagem').click();
    }
</script>

user1385845 27 апр '09 в 10:41 2009-04-27 10:41 · Answer 10 · 2009-04-27 10:41

Это нарочно и по замыслу. Это проблема безопасности.

4

Источник

user1385845 27 апр '09 в 10:41

user1579939 05 окт '14 в 18:09 2014-10-05 18:09 · Answer 11 · 2014-10-05 18:09

Слишком поздно, чтобы ответить, но я думаю, что эта минимальная установка работает лучше всего. Я тоже ищу то же самое.

  <div class="btn-file">
     <input type="file" class="hidden-input">
     Select your new picture
  </div>

// CSS

.btn-file {
  display: inline-block;
  padding: 8px 12px;
  cursor: pointer;
  background: #89f;
  color: #345;
  position: relative;
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  filter: alpha(opacity=0);
  opacity: 0;
  cursor: inherit;
  display: block;
}

jsbin

демонстрация кнопок ввода файла начальной загрузки

user1122880 28 янв '16 в 17:07 2016-01-28 17:07 · Answer 12 · 2016-01-28 17:07

Это очень старый вопрос, но, к сожалению, этот вопрос все еще актуален и требует решения.

(Удивительно простое) решение, которое я придумала, состоит в том, чтобы "скрыть" поле ввода реального файла и обернуть его тегом LABEL (для улучшения может быть основан на Bootstrap и HTML5).

See here: Пример кода здесь

Таким образом, поле ввода реального файла невидимо, и все, что вы видите, это настраиваемая "кнопка", которая на самом деле является модифицированным элементом LABEL. Когда вы щелкаете по этому элементу LABEL, появляется окно для выбора файла, и файл, который вы выбираете, переходит в поле ввода реального файла.

Кроме того, вы можете манипулировать внешним видом и поведением по своему усмотрению (например: получить имя выбранного файла из входного файла файла после выбранного и показать его где-нибудь. Элемент LABEL не делает этого автоматически, конечно. Я обычно просто помещаю это в LABEL, как его текстовое содержание).

Осторожно, хотя! Манипулирование внешним видом и поведением ограничено тем, что вы можете себе представить и придумать.;-);-)

user5760 14 июн '11 в 17:00 2011-06-14 17:00 · Answer 13 · 2011-06-14 17:00

Мне удалось с помощью простого $(...). Click(); с JQuery 1.6.1

4

Источник

user5760 14 июн '11 в 17:00

user1412389 12 апр '13 в 10:58 2013-04-12 10:58 · Answer 14 · 2013-04-12 10:58

Или просто

$(':input[type="file"]').show().click().hide();

3

Источник

user1412389 12 апр '13 в 10:58

user6835654 06 авг '20 в 10:05 2020-08-06 10:05 · Answer 15 · 2020-08-06 10:05

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

Я использую это:

< input type="file" name="article_input_file" id="article_input_file" accept=".xlsx,.xls" style="display: none" >

$("#article_input_file").click();

это работает из любого стандартного тега скрипта на вашей HTML-странице.

3

Источник

user6835654 06 авг '20 в 10:05

user6061777 26 апр '16 в 17:28 2016-04-26 17:28 · Answer 16 · 2016-04-26 17:28

У меня были проблемы с пользовательской проверкой на стороне клиента для <input type="file"/> используя поддельную кнопку, чтобы вызвать ее, и решение @Guillaume Bodi сработало для меня (также с opacity: 0; на хроме)

$("#MyForm").on("click", "#fake-button", function () {
        $("#uploadInput").focus().trigger("click");
    });

и стиль CSS для загрузки ввода

#uploadInput {
opacity: 0.0; 
filter: alpha(opacity=0); /* IE lt 8 */
-ms-filter: "alpha(opacity=0)"; /* IE 8 */
-khtml-opacity: 0.0; /* Safari 1.x */
-moz-opacity: 0.0;
}

user1139913 10 янв '12 в 01:12 2012-01-10 01:12 · Answer 17 · 2012-01-10 01:12

Попробуйте это, это взломать. Положение: абсолютное значение для Chrome, а триггер ("изменение") для IE.

var hiddenFile = $("<input type=\"file\" name=\"file\" id=\"file1\" style=\"position:absolute;left:-9999px\" />");
$('body').append(hiddenFile);

$('#aPhotoUpload').click(function () {
    hiddenFile.trigger('click');
    if ($.browser.msie)
        hiddenFile.trigger('change');
});

hiddenFile.change(function (e) {
    alert('TODO');
});

user148390 17 янв '15 в 11:23 2015-01-17 11:23 · Answer 18 · 2015-01-17 11:23

Моя проблема была немного другой на iOS 7. Оказалось, что FastClick вызывал проблемы. Все, что мне нужно было сделать, это добавить class="needsclick" на мою кнопку.

1

Источник

user148390 17 янв '15 в 11:23

user1389637 25 мар '16 в 18:43 2016-03-25 18:43 · Answer 19 · 2016-03-25 18:43

Это, пожалуй, лучший ответ, учитывая кросс-браузерные проблемы.

CSS:

#file {
  opacity: 0;
  width: 1px;
  height: 1px;
}

JS:

$(".file-upload").on('click',function(){
   $("[name='file']").click();
});

HTML:

<a class="file-upload">Upload</a>
<input type="file" name="file">

0

Источник

user1389637 25 мар '16 в 18:43

user12775945 24 янв '20 в 17:51 2020-01-24 17:51 · Answer 20 · 2020-01-24 17:51

Думаю, я понимаю вашу проблему, потому что у меня аналогичный. Итак, тег<label>есть атрибут для, вы можете использовать этот атрибут, чтобы связать свой ввод с type="file". Но если вы не хотите активировать это с помощью этого ярлыка из-за какого-то правила вашего макета, вы можете сделать это.

$(document).ready(function(){
  var reference = $(document).find("#main");
  reference.find(".js-btn-upload").attr({
     formenctype: 'multipart/form-data'
  });
  
  reference.find(".js-btn-upload").click(function(){
    reference.find("label").trigger("click");
  });
  
});

.hide{
  overflow: hidden;
  visibility: hidden;
  /*Style for hide the elements, don't put the element "out" of the screen*/
}

.btn{
  /*button style*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="main">
<form enctype"multipart/formdata" id="form-id" class="hide" method="post" action="your-action">
  <label for="input-id" class="hide"></label>
  <input type="file" id="input-id" class="hide"/>
</form>

<button class="btn js-btn-upload">click me</button>
</div>

Конечно, вы адаптируете это для своих целей и макета, но я знаю, что это более простой способ заставить его работать!!

user545303 30 июн '12 в 07:31 2012-06-30 07:31 · Answer 21 · 2012-06-30 07:31

Основываясь на ответе Гийома Боди, я сделал это:

$('.fileinputbar-button').on('click', function() {
    $('article.project_files > header, article.upload').show();
    $('article.project_files > header, article.upload header').addClass('active');
    $('.file_content, article.upload .content').show();
    $('.fileinput-button input').focus().click();
    $('.fileinput-button').hide();
});

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