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

Question

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

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

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

Answer 1

Я искал решение этого дня. И вот выводы, которые я сделал:

1. Из соображений безопасности Opera и Firefox не позволяют запускать ввод файла.
2. Единственная удобная альтернатива - создать «скрытый» ввод файла (используя непрозрачность, а не «скрытый» или «показ: нет»!) И затем создать кнопку «под» ним. Таким образом, кнопка видна, но при щелчке пользователя она фактически активирует ввод файла.

Надеюсь, это поможет! :)

<div style="display: block; width: 100px; height: 20px; overflow: hidden;">
<button style="width: 110px; height: 30px; position: relative; top: -5px; left: -5px;"><a href="javascript: void(0)">Upload File</a></button>
<input type="file" id="upload_input" name="upload" style="font-size: 50px; width: 120px; opacity: 0; filter:alpha(opacity=0);  position: relative; top: -40px;; left: -20px" />
</div>

Answer 2

Вы не можете сделать это во всех браузерах, предположительно IE разрешает , но Mozilla и Opera этого не делают.

Когда вы создаете сообщение в GMail, функция «прикрепить файлы» реализуется одним способом для IE и любого браузера, который поддерживает это, а затем реализуется другим способом для Firefox и тех браузеров, которые этого не делают.

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

Answer 3

Вы можете запустить click () в любом браузере, но в некоторых браузерах этот элемент должен быть видимым и сфокусированным. Вот пример jQuery:

$('#input_element').show();
$('#input_element').focus();
$('#input_element').click();
$('#input_element').hide();

Он работает со скрытием до click(), но я не знаю, работает ли он без вызова метода show. Никогда не пробовал это на Opera, я тестировал на IE / FF / Safari / Chrome, и это работает. Я надеюсь, что это поможет.

Answer 4

ЭТО ВОЗМОЖНО: Под FF4 +, Opera?, Chrome: но:

1. inputElement.click() следует вызывать из контекста действий пользователя! (не контекст выполнения скрипта)

2. <input type="file" /> должно быть видимым (inputElement.style.display !== 'none') (вы можете скрыть это с помощью видимости или чего-то другого, но без свойства display)

Answer 5

Для тех, кто понимает, что вам нужно наложить невидимую форму на ссылку, но лень писать, я написал ее для вас. Ну, для меня, но может также поделиться. Комментарии приветствуются.

HTML (где-то):

<a id="fileLink" href="javascript:fileBrowse();" onmouseover="fileMove();">File Browse</a>

HTML (где вам все равно):

<div id="uploadForm" style="filter:alpha(opacity=0); opacity: 0.0; width: 300px; cursor: pointer;">
    <form method="POST" enctype="multipart/form-data">
        <input type="file" name="file" />
    </form>
</div>

JavaScript:

function pageY(el) {
    var ot = 0;
    while (el && el.offsetParent != el) {
        ot += el.offsetTop ? el.offsetTop : 0;
        el = el.offsetParent;
    }
    return ot;
}

function pageX(el) {
    var ol = 0;
    while (el && el.offsetParent != el) {
        ol += el.offsetLeft ? el.offsetLeft : 0;
        el = el.offsetParent;
    }
    return ol;
}

function fileMove() {
    if (navigator.appName == "Microsoft Internet Explorer") {
        return; // Don't need to do this in IE. 
    }
    var link = document.getElementById("fileLink");
    var form = document.getElementById("uploadForm");
    var x = pageX(link);
    var y = pageY(link);
    form.style.position = 'absolute';
    form.style.left = x + 'px';
    form.style.top = y + 'px';
}

function fileBrowse() {
    // This works in IE only. Doesn't do jack in FF. :( 
    var browseField = document.getElementById("uploadForm").file;
    browseField.click();
}

Answer 6

Попробуйте это решение: http://code.google.com/p/upload-at-click/

Answer 7

Если вы хотите, чтобы метод click работал в Chrome, Firefox и т. Д., Примените следующий стиль к своему входному файлу. Это будет совершенно скрыто, как будто вы делаете display: none;

#fileInput {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -5000px;
}

Это так просто, я проверил это работает!

Answer 8

$(document).one('mousemove', function() { $(element).trigger('click') } );

Сработало для меня, когда я столкнулся с подобной проблемой, это обычный eRube Goldberg.

Answer 9

просто используйте метку метки, чтобы вы могли скрыть ввод и заставить его работать через связанную метку https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label

Answer 10

Работает:

По соображениям безопасности в Firefox и Opera вы не можете выполнить щелчок при вводе файла, но вы можете смоделировать с помощью MouseEvents:

<script>
click=function(element){
    if(element!=null){
        try {element.click();}
        catch(e) {
            var evt = document.createEvent("MouseEvents");
            evt.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null);
            element.dispatchEvent(evt);
            }
        }
    };
</script>

<input type="button" value="upload" onclick="click(document.getElementById('inputFile'));"><input type="file" id="inputFile" style="display:none">