Вход в файл триггера JQuery

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

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

назовите это взломом.

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

Ответ 2

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

JS:

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

HTML:

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

CSS

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

→ > Другой, который использует Cross-Browser: < <

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

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

Ответ 3

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

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

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

Ответ 4

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

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

Ключ фокусирует до, стреляя кликом (иначе хром игнорирует его).

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

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

Ответ 5

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

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>

Ответ 6

adardesign прибивает его к тому, что элемент ввода файла игнорируется, когда он скрыт. Я также заметил, что многие люди меняют размер элемента на 0 или вытесняют его за пределы с настройками позиционирования и переполнения. Все это отличные идеи. Альтернативный способ, который также работает отлично, - это установить непрозрачность 0. Тогда вы всегда можете просто установить позицию, чтобы она не смещала другие элементы, как скрывает. Кажется, что немного ненужно сдвигать элемент почти на 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);
}

Ответ 7

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

<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>

Ответ 8

Это специально и по дизайну. Это проблема безопасности.

Ответ 9

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

Ответ 10

или просто

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

Ответ 11

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

  <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

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

Ответ 12

Просто ради любопытства вы можете сделать что угодно, как хотите, динамически создавая форму загрузки и вводный файл, не добавляя его в дерево 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.

Ответ 13

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

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

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

Ответ 14

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

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

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

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

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

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

Ответ 15

Попробуй это, это взломать. Позиция: абсолютная для Chrome и триггер ('change') для 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');
});

Ответ 16

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

Ответ 17

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

$("#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;
}

Ответ 18

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

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">

Ответ 19

На основании ответа Гийома Боди я сделал это:

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

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