JQuery триггер файла ввода - PullRequest
Новая
       48

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

156 голосов
/ 27 апреля 2009

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

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

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

Ответы [ 19 ]

188 голосов
/ 05 сентября 2011

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

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

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

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

Назовите это хаком.

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

99 голосов
/ 24 октября 2011

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

JS: 

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

HTML: 

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

CSS: 

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

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

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

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());
    });
});
55 голосов
/ 14 декабря 2016

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

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

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

16 голосов
/ 20 апреля 2012

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

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

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

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

#uploadInput {
    position: absolute;
    left: -9999px;
}
10 голосов
/ 21 марта 2014

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

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>
9 голосов
/ 02 июня 2012

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);
}
6 голосов
/ 19 апреля 2017

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

5 голосов
/ 19 января 2013

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

<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>
4 голосов
/ 05 октября 2014

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

  <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

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

4 голосов
/ 27 апреля 2009

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...