Проблема с использованием click () на входе[type=file]

у меня проблема с click() функции. В опере это не работает.

Я пытаюсь сделать input type=file кликнул на onclick событие другого элемента. Мне нужно стиль моего ввода type=file элемент, поэтому я сделал его невидимым и заменил его простым нажатием стиле. Теперь я хочу, чтобы элемент файла был нажат при нажатии кнопки.

Я не могу использовать jQuery, потому что я использую библиотеку MooTools для календаря на своей странице, и это создает конфликт, когда я пытаюсь использовать на jQuery. Я также попытался избежать конфликта, используя jQuery.noConflict(); но я не мог этого сделать, потому что я новичок в jQuery. Вот мой HTML код: 

<input name="myfile" id="uploadme" type="file" style="visibility:hidden; width:1px;" onchange="this.form.submit()"/>
<input type="button" id="clickme" onclick="show_upload()"/>

и вот мой код JavaScript:

function show_upload()
{
    document.getElementById('uploadme').click();
}

Я также пробовал этот код jQuery, но я не мог заставить его работать без конфликта с библиотекой MooTools:

jQuery.noConflict();
(function($){
    $('#clickme').click(function($){
        $('#uploadme').click();
    })(jQuery);
});
7
click file-io javascript jquery triggers

5 ответов

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

jQuery.noConflict();

(function($){
    $('#clickme').click(function(){ // The $ is not necessary - you already have it
        $('#uploadme').click();
    }); // You should remove (jQuery) because you don't want to call the function here
})(jQuery); // you need (jQuery) to actually call the function - you only defined the function

в любом случае, этот ответ говорит, что вы не можете делать то, что хотите в Opera:в JavaScript можно ли программно создать событие" click " для элемента ввода файла?

2

input[type=file] очень своеобразный тип ввода, вы не можете сделать с ним много, в первую очередь по соображениям безопасности.

Я предполагаю здесь, но вы, возможно, хотите, чтобы у вас была кнопка загрузки в стиле? В этом случае я должен разочаровать вас, вы не можете сделать это с HTML. Вам придется использовать HTML5 или Flash (например, SWFUpload)

3

Это ошибка Opera, но есть возможность получить результат другим способом, используя <label> tag:

<input type="file" id="file" style="position: absolute; visibility: hidden;">
<label for="file" id="file-label"></label>
<a onclick="$('#file-label').click()">Browse..</a>
2

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

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

но как-то это работает, только если это в функции, которая была вызвана через click-event.

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

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

невозможно нажать эту кнопку с помощью JavaScript (как сказали друзья), но посмотрите на это:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Lorem ipsum</title>
    </head>
    <body>
        <input type="file" id="first" style="width:200px; background-color:red">
        <input type="file" id="second" style="width:200px; background-color:green; position:relative; left:-100px; opacity:0">
        <script>
            document.getElementById("first").onchange = function(){alert("first")}
            document.getElementById("second").onchange = function(){alert("second")}
        </script>
    </body>
</html>

вы можете сделать что-то подобное. Единственная проблема заключается в том, что вы должны знать размеры этих входов. Хм... Может, это и не проблема. Можно задать размеры. :>

-2