it-roy-ru.com

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

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

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

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

153
Alec Smart

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

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

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

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

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

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

187
adardesign

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

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

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

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

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

49
Jhon Rey

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

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

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

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

#uploadInput {
    position: absolute;
    left: -9999px;
}
16
The Mighty Rubber Duck

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

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>

10
Mohan

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);
}
9
eyegropram

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

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

<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>
5
E9 Sistemas

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

4
Chad Grant

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

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

или просто

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

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

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

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

3
skywlkr

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

3
Valentin Galea

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

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

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

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

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

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

3
TheCuBeMan

у меня были проблемы с пользовательской проверкой на стороне клиента для <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;
}
2
Amin K

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

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

1
Dex

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

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
Eddsters