В JavaScript можно ли программно вызвать событие «click» для элемента ввода файла? - PullRequest
Новая
       126

В JavaScript можно ли программно вызвать событие «click» для элемента ввода файла?

250 голосов
/ 17 октября 2008

Я бы хотел, чтобы событие клика срабатывало на теге <input type="file"> программно.

Просто вызов click (), похоже, ничего не делает или, по крайней мере, не вызывает диалоговое окно выбора файла.

Я экспериментировал с захватом событий с использованием прослушивателей и перенаправлением события, но я не смог заставить его фактически выполнить событие, как кто-то щелкнул по нему.

Ответы [ 28 ]

3 голосов
/ 30 июля 2014

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

Тем не менее, на сегодняшний день fileInput.click () работает в текущем Chrome (36.0.1985.125 м) и текущем Firefox ESR (24.7.0), но не в текущем IE (11.0.9600.17207). Наложение поля файла с непрозрачностью 0 поверх кнопки работает, но я хотел, чтобы элемент ссылки был видимым триггером, а подчеркивание при наведении курсора не вполне работает ни в одном браузере. Он мигает, а затем исчезает, возможно, браузер выясняет, действительно ли применяется стиль наведения, или нет.

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

Все просто: поместите поле ввода файла за пределы экрана (позиция: абсолютная; верх: -5000px), поместите вокруг него элемент метки и запустите щелчок на метке вместо самого поля файла.

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

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

3 голосов
/ 31 октября 2014

JS Fiddle: http://jsfiddle.net/eyedean/1bw357kw/

popFileSelector = function() {
    var el = document.getElementById("fileElem");
    if (el) {
        el.click();  
    }
};

window.popRightAway = function() {
    document.getElementById('log').innerHTML += 'I am right away!<br />';
    popFileSelector();
};

window.popWithDelay = function() {
    document.getElementById('log').innerHTML += 'I am gonna delay!<br />';
    window.setTimeout(function() {
        document.getElementById('log').innerHTML += 'I was delayed!<br />';
        popFileSelector();
    }, 1000);
};
<body>
  <form>
      <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)" />
  </form>
  <a onclick="popRightAway()" href="#">Pop Now</a>
    <br />
  <a onclick="popWithDelay()" href="#">Pop With 1 Second Delay</a>
    <div id="log">Log: <br /></div>
</body>
3 голосов
/ 10 октября 2012

РАБОЧЕЕ РЕШЕНИЕ

Позвольте мне добавить к этому старому посту рабочее решение, которое я использовал, которое работает, вероятно, в 80% или более всех браузеров, как новых, так и старых.

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

HTML Идентификаторы просто вставляются, если вам нужен быстрый способ доступа к конкретному элементу, однако классы являются обязательными, поскольку они связаны с CSS, который задает все это обработать 

<div class="file-input wrapper">
    <input id="inpFile0" type="file" class="file-input control" />
    <div class="file-input content">
        <label id="inpFileOutput0" for="inpFileButton" class="file-input output">Click Here</label>
        <input id="inpFileButton0" type="button" class="file-input button" value="Select File" />
    </div>
</div>

CSS Имейте в виду, что цвета и стили шрифтов - это ваши предпочтения. Если вы используете этот базовый CSS, вы всегда можете использовать заключительную разметку для стиля по своему усмотрению, это показано в jsFiddle, указанном в конце. 

.file-test-area {
    border: 1px solid;
    margin: .5em;
    padding: 1em;
}
.file-input {
    cursor: pointer !important;
}
.file-input * {
    cursor: pointer !important;
    display: inline-block;
}
.file-input.wrapper {
    display: inline-block;
    font-size: 14px;
    height: auto;
    overflow: hidden;
    position: relative;
    width: auto;
}
.file-input.control {
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;

    height: 100%;
    position: absolute;
    text-align: right;
    width: 100%;
    z-index: 2;
}
.file-input.content {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 1;
}
.file-input.output {
    background-color: #FFC;
    font-size: .8em;
    padding: .2em .2em .2em .4em;
    text-align: center;
    width: 10em;
}
.file-input.button {
    border: none;
    font-weight: bold;
    margin-left: .25em;
    padding: 0 .25em;
}

JavaScript Чисто и верно, однако, некоторые старые (вышедшие на пенсию) браузеры могут все еще иметь проблемы с ним (например, Netscrape 2!) 

var inp = document.getElementsByTagName('input');
for (var i=0;i<inp.length;i++) {
    if (inp[i].type != 'file') continue;
    inp[i].relatedElement = inp[i].parentNode.getElementsByTagName('label')[0];
    inp[i].onchange /*= inp[i].onmouseout*/ = function () {
        this.relatedElement.innerHTML = this.value;
    };
};

Пример работы jsFiddle

3 голосов
/ 07 марта 2012

Мое решение для Safari с jQuery и jQuery-ui: 

$("<input type='file' class='ui-helper-hidden-accessible' />").appendTo("body").focus().trigger('click');
3 голосов
/ 08 декабря 2015

Вот чистое решение этой проблемы на JavaScript. Хорошо работает во всех браузерах 

<script>
    function upload_image_init(){
        var elem = document.getElementById('file');
        if(elem && document.createEvent) {
           var evt = document.createEvent("MouseEvents");
           evt.initEvent("click", true, false);
           elem.dispatchEvent(evt);
        }
    }
</script>
3 голосов
/ 10 сентября 2011

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

<input type="file" style="position:absolute;left:-999px;" id="fileinput" />
<button  id="addfiles" >Add files</button>

<script language="javascript" type="text/javascript">
   $("#addfiles").click(function(){
      $("#fileinput").click();
   });
</script>
2 голосов
/ 17 октября 2008

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

Если вам нужно, чтобы диалоговое окно файла отображалось только тогда, когда пользователь что-то щелкает, скажем, из-за того, что вам нужны более удобные кнопки загрузки файлов, вы можете взглянуть на , что придумала Шон Инман .

Мне удалось добиться запуска клавиатуры с творческим смещением фокуса в и из управления между событиями нажатия клавиш, нажатия клавиш и нажатия клавиш. YMMV.

Мой искренний совет - оставить это в покое, потому что это мир браузерной несовместимости. Незначительные обновления браузера также могут блокировать трюки без предупреждения, и вам, возможно, придется заново изобретать хаки, чтобы они работали.

2 голосов
/ 29 апреля 2009

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

  1. Создайте файл загрузки и отдельный элемент, содержащий изображение, которое вы хотите использовать в качестве кнопки
  2. Расположите их так, чтобы они перекрывали друг друга, и сделайте фон файла и границы прозрачными, чтобы кнопка была единственной видимой
  3. Добавьте JavaScript, чтобы IE открывал диалоговое окно при нажатии кнопки / файла.
  4. Используйте событие onchange для отправки формы при выборе файла

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

2 голосов
/ 02 декабря 2011

У меня есть тег <input type="button">, скрытый от глаз. Я прикрепил событие "onClick" к любому видимому компоненту любого типа, например к метке. Это было сделано с помощью либо инструментов разработчика Google Chrome, либо Firebug Mozilla Firefox с помощью правой кнопки мыши «изменить HTML». В этом случае укажите следующий скрипт или что-то похожее:

Если у вас есть JQuery: 

$('#id_of_component').click();

если нет: 

document.getElementById('id_of_component').click();

Спасибо.

2 голосов
/ 01 июля 2016

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

$scope.getSingleInvoicePDF = function(invoiceNumberEntity) {
   var fileName = invoiceNumberEntity + ".pdf";
   var pdfDownload = document.createElement("a");
   document.body.appendChild(pdfDownload);

   AngularWebService.getFileWithSuffix("ezbillpdfget",invoiceNumberEntity,"pdf" ).then(function(returnedJSON) {
       var fileBlob = new Blob([returnedJSON.data], {type: 'application/pdf'});
       if (navigator.appVersion.toString().indexOf('.NET') > 0) { // for IE browser
           window.navigator.msSaveBlob(fileBlob, fileName);
       } else { // for other browsers
           var fileURL = window.URL.createObjectURL(fileBlob);
           pdfDownload.href = fileURL;
           pdfDownload.download = fileName;
           pdfDownload.click();      
       }
   });
};

Для AngularJS или даже для обычного JavaScript.

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

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

...