угловой программный щелчок ввода из ngAfterViewInit [дубликат]

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

Основной принцип состоит в том, чтобы поймать наиболее специфический тип, который вы можете.

148
задан saji89 21 October 2012 в 13:14
поделиться

19 ответов

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

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

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

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

называют это хаком.

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

185
ответ дан adardesign 27 August 2018 в 23:33
поделиться

У меня были проблемы с пользовательской проверкой на стороне клиента для <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 27 August 2018 в 23:33
поделиться

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

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
ответ дан Bhuwan 27 August 2018 в 23:33
поделиться

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

<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
ответ дан Bruno Ribeiro 27 August 2018 в 23:33
поделиться

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

4
ответ дан Chad Grant 27 August 2018 в 23:33
поделиться

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

1
ответ дан Dex 27 August 2018 в 23:33
поделиться

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

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 27 August 2018 в 23:33
поделиться

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

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

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

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

34
ответ дан Jhon Rey 27 August 2018 в 23:33
поделиться

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

  <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

bootstrap кнопки ввода файлов demo

4
ответ дан Natwar Singh 27 August 2018 в 23:33
поделиться

или просто

$(':input[type="file"]').show().click().hide();
3
ответ дан Otvazhnii 27 August 2018 в 23:33
поделиться

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

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

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
ответ дан saji89 27 August 2018 в 23:33
поделиться

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

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

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

3
ответ дан skywlkr 27 August 2018 в 23:33
поделиться

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

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: & lt; & lt;

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

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());
    });
});
96
ответ дан sled 27 August 2018 в 23:33
поделиться

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

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

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

-1
ответ дан Stevo 27 August 2018 в 23:33
поделиться

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

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

Ключ фокусируется перед стрельбой щелчком (иначе хром игнорирует его).

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

#uploadInput {
    position: absolute;
    left: -9999px;
}
15
ответ дан The Mighty Rubber Duck 27 August 2018 в 23:33
поделиться

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

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

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

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

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

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

3
ответ дан TheCuBeMan 27 August 2018 в 23:33
поделиться

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

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

4
ответ дан Valentin Galea 27 August 2018 в 23:33
поделиться
Другие вопросы по тегам:

Похожие вопросы: