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

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

7 голосов
/ 07 августа 2011

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

Я пытаюсь сделать input type=file нажатие на onclick событие другого элемента. Мне нужно стилизовать свой элемент input 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);
});

Ответы [ 5 ]

3 голосов
/ 07 августа 2011

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

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

2 голосов
/ 03 октября 2015

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

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

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

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

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 голосов
/ 04 мая 2013

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

<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 голосов
/ 07 августа 2011

Я не уверен в щелчке ввода (это может быть просто невозможно из-за соображений безопасности), но ваш код 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 можно ли программно вызвать событие «щелчка» для элемента ввода файла?

0 голосов
/ 07 августа 2011

Невозможно нажать на эту кнопку с помощью 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>

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

...