Problem za pomocą kliknięcia() na wejściu [typ = plik]

Mam problem z funkcją click(). To nie działa w Operze.Problem za pomocą kliknięcia() na wejściu [typ = plik]

Próbuję zrobić input type=file kliknięty na onclick wydarzenie innego elementu. Muszę narysować mój element wejściowy type=file, więc zrobiłem go niewidoczny i zastąpiłem go prostym przyciskiem stylu. Teraz chcę, aby element kliknięcia został kliknięty po kliknięciu przycisku.

Nie mogę używać jQuery, ponieważ korzystam z biblioteki MooTools dla kalendarza na mojej stronie i powoduje ona konflikt, gdy próbuję użyć jQuery. Próbowałem również uniknąć konfliktu przy użyciu jQuery.noConflict();, ale nie mogłem tego zrobić, ponieważ jestem nowy w jQuery. Tu jest mój kodu 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()"/>

I tu jest mój kod JavaScript:

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

Próbowałem również ten kod jQuery, ale nie mogłem zrobić to praca bez konfliktu z biblioteki MooTools:

jQuery.noConflict(); 
(function($){ 
    $('#clickme').click(function($){ 
     $('#uploadme').click(); 
    })(jQuery); 
});

Źródło

2011-08-07 Rafael Sedrakyan

Dlaczego dodaje tag jquery, jeśli nie można go używać? – PeeHaa

@PeeHaa: Prawdopodobnie chce pomóc w pracy jQuery z MooTools, więc pytanie oznaczone jako 'jquery' nie jest wcale takie dziwne :) – pimvdb

Nie jestem pewien do kliknięcia wejścia (może to być po prostu niemożliwe ze względów bezpieczeństwa), ale kod jQuery nie jest całkowicie poprawny.

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

Zresztą ta odpowiedź mówi, że nie może zrobić, co chcesz w Operze: In JavaScript can I make a "click" event fire programmatically for a file input element?

Źródło

2011-08-07 17:01:38 pimvdb

+1 dla linku – Halcyon

Miałeś rację co do kodu jquery :), ale zrobiłem to w sposób opisany w opublikowanym linku. Wielkie dzięki za pomoc. –

nie działa na razie w nowoczesnej przeglądarce! –

input[type=file] jest bardzo osobliwy typ wejścia, tak naprawdę nie można zrobić dużo z nim, przede wszystkim ze względów bezpieczeństwa.

Zgaduję, ale czy może chcesz, abyś miał swój stylowy przycisk przesyłania? W takim przypadku muszę Cię rozczarować, nie możesz tego zrobić za pomocą HTML. Będziesz albo trzeba używać HTML5 lub Flash (jak SWFUpload)

Źródło

2011-08-07 17:11:59 Halcyon

http://jsfiddle.net/sSSNj/159/ sprawdź ten link, a zobaczysz, że możesz mieć swój własny przycisk przesyłania stylu :) –

Tak, ale używasz 'widoczności: ukryty' hack. Myślę, że to tylko dzięki życzliwości przeglądarek, które działa i najwyraźniej nie działa w Operze. – Halcyon

+1, ponieważ jest to prawda. 'input type = file' jest bardzo podatny na włamania i dlatego jest dość zablokowany w swoich funkcjach. Tak, istnieją hacki, które działają w większości przeglądarek, aby je stylizować, ale są to po prostu: hacki, napisane, aby ominąć ograniczenia bezpieczeństwa. I jest duża szansa, że przestaną działać w przyszłych wersjach przeglądarek, jeśli poprawią bezpieczeństwo. – Spudley

-2

nie da się kliknąć ten przycisk przy użyciu JavaScript (jak przyjaciele twierdzą), ale to zobaczyć:

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

można zrobić coś takiego. Jedynym problemem jest to, że musisz znać wymiary tych danych wejściowych. Hm ... Może to nie problem. Możesz ustawić wymiary. :>

Źródło

2011-08-07 17:32:22

Thansk. Zrobiłem to już w sposób, który opisałeś 10 minut temu. –

w jaki sposób można kliknąć element pliku? – Mahi

Jest to bug Opera, ale istnieje możliwość, aby uzyskać wynik przez różny sposób, przy użyciu <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>

Źródło

2013-05-04 00:08:36

to nie jest niemożliwe:

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

Ale jakoś to działa tylko jeśli jest to funkcja, która została wywołana przez zdarzenie click.

Więc może mieć następującą konfigurację:

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

Źródło

2015-10-03 00:24:15 EscapeNetscape

initMouseEvent zostanie usunięty z wielu przeglądarek :( – Mahi

Problem za pomocą kliknięcia() na wejściu [typ = plik]

Odpowiedz

Powiązane problemy