JavaScript click event в обещании, затем [дубликат]

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

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

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

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

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>

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

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

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

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

Он работает:

Из соображений безопасности в 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">

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

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

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

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

. Это просто, я протестировал его!

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

Это чистое решение 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>

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>

Вы можете использовать

<button id="file">select file</button>
<input type="file" name="file" id="file_input" style="display:none;">
<script>
$('#file').click(function() {
        $('#file_input').focus().trigger('click');
    });
</script>

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

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

Мне удалось добиться запуска клавиатуры с творческим переключением фокуса внутри и вне контроля между keydown, keypress & amp; события для создания ключей. YMMV.

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

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

Вы можете сделать это в соответствии с ответом из диалогового окна «Открыть файл» на & lt; a & gt; tag

<input type="file" id="upload" name="upload" style="visibility: hidden; width: 1px;     height: 1px" multiple />
<a href="" onclick="document.getElementById('upload').click(); return false">Upload</a>

Вот решение, которое работает для меня: CSS:

#uploadtruefield {
    left: 225px;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 266px;
    opacity:0;
    -moz-opacity:0;
    filter:alpha(opacity:0);
    width: 270px;
    z-index: 2;
}

.uploadmask {
    background:url(../img/browse.gif) no-repeat 100% 50%;
}
#uploadmaskfield{
    width:132px;
}

HTML с «маленькой» помощью JQuery:

<div class="uploadmask">
    <input id="uploadmaskfield" type="text" name="uploadmaskfield">
</div>
<input id="uploadtruefield"  type="file" onchange="$('#uploadmaskfield').val(this.value)" >

Просто убедитесь, что maskfied is полностью охвачено истинным полем загрузки.

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

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

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

Это просто: расположите поле ввода файла offcreen (position: absolute; top: -5000px), поместите вокруг него элемент метки и вызовите щелчок на метке вместо самого поля файла.

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

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

это не невозможно:

var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);  
setTimeout(function(){ document.getElementById('input_field_id').dispatchEvent(evObj); },100);

Но как-то это работает, только если это функция, вызванная с помощью события click.

Итак, у вас может быть следующая настройка :

html:

<div onclick="openFileChooser()" class="some_fancy_stuff">Click here to open image chooser</div>
<input type="file" id="input_img">

JavaScript:

    function openFileChooser() {
      var evObj = document.createEvent('MouseEvents');
      evObj.initMouseEvent('click', true, true, window);  
      setTimeout(function()
      { 
        document.getElementById('input_img').dispatchEvent(evObj);      
      },100);      
    }

Надеюсь, это помогает кому-то - я провел 2 часа, стукнувшись головой:

В IE8 или IE9, если вы вообще запускаете ввод файла с помощью javascript (поверьте, что я попробовал их все), он не позволит вам отправить форму с помощью javascript, она просто будет терпеть неудачу.

Отправка формы с помощью обычной кнопки отправки может работать, но вызов form.submit ();

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

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

$("<input type='file' class='ui-helper-hidden-accessible' />").appendTo("body").focus().trigger('click');

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

<script>
    function sel_file() {
        $("input[name=userfile]").trigger('click');
    }  
</script>

<input type="file" name="userfile" id="userfile" />

<a href="javascript:sel_file();">Click</a>

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

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

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