Chciałbym <input type="file">programowo wywołać zdarzenie kliknięcia tagu.

Samo wywołanie click () wydaje się nic nie robić, a przynajmniej nie wyświetla okna wyboru pliku.

Eksperymentowałem z przechwytywaniem zdarzeń za pomocą detektorów i przekierowywaniem zdarzenia, ale nie udało mi się tego zrobić, aby faktycznie wykonać zdarzenie tak, jakby ktoś go kliknął.

Nie możesz tego zrobić we wszystkich przeglądarkach, podobno IE na to pozwala, ale Mozilla i Opera nie.

Gdy piszesz wiadomość w Gmailu, funkcja „dołącz pliki” jest implementowana w jeden sposób dla IE i dowolnej przeglądarki, która to obsługuje, a następnie wdrażana w inny sposób dla Firefoxa i przeglądarek, które tego nie robią.

Nie wiem, dlaczego nie możesz tego zrobić, ale jedną rzeczą, która jest zagrożeniem bezpieczeństwa i której nie możesz robić w żadnej przeglądarce, jest programowe ustawienie nazwy pliku w elemencie HTML File.

Przez cały dzień szukałem rozwiązania. Oto wnioski, które wyciągnąłem:

1. Ze względów bezpieczeństwa Opera i Firefox nie pozwalają na wyzwalanie danych wejściowych pliku.
2. Jedyną wygodną alternatywą jest utworzenie „ukrytego” pliku wejściowego (przy użyciu krycia, a nie „ukrytego” lub „display: none”!), A następnie utworzenie przycisku „pod” nim. W ten sposób przycisk jest widoczny, ale po kliknięciu przez użytkownika faktycznie aktywuje wprowadzanie pliku.

Mam nadzieję że to pomoże! :)

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

Możesz uruchomić click () w dowolnej przeglądarce, ale niektóre przeglądarki wymagają, aby element był widoczny i skoncentrowany. Oto przykład jQuery:

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

Działa z hide wcześniej, click()ale nie wiem, czy działa bez wywołania metody show. Nigdy nie próbowałem tego w Operze, testowałem na IE / FF / Safari / Chrome i działa. Mam nadzieję, że to pomoże.

TO JEST MOŻLIWE: pod FF4 +, Opera?, Chrome: ale:

1. inputElement.click()należy wywoływać z kontekstu akcji użytkownika! (nie kontekst wykonania skryptu)

2. <input type="file" />powinien być widoczny ( inputElement.style.display !== 'none') (możesz ukryć to z widocznością lub czymś innym, ale nie właściwością „display”)

Dla tych, którzy rozumieją, że musisz nałożyć link niewidoczny na link, ale są zbyt leniwi, by pisać, napisałem to dla ciebie. Cóż, dla mnie, ale równie dobrze mogę się podzielić. Komentarze są mile widziane.

HTML (gdzieś):

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

HTML (Gdzieś się nie przejmujesz):

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

Wypróbuj to rozwiązanie: http://code.google.com/p/upload-at-click/

wystarczy użyć tagu etykiety, w ten sposób można ukryć dane wejściowe i sprawić, by działało poprzez powiązaną etykietę https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label

Jeśli chcesz, aby ta clickmetoda działała w przeglądarce Chrome, Firefox itp., Zastosuj następujący styl do pliku wejściowego. Będzie idealnie ukryty, to tak jak tydisplay: none;

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

To takie proste, przetestowałem to działa!

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

Pracował dla mnie, gdy napotkałem podobny problem, to zwykły eRube Goldberg.

ROZWIĄZANIE ROBOCZE

Dodam do tego starego posta, działającego rozwiązania, z którego korzystałem, które działa w prawdopodobnie 80% lub więcej wszystkich przeglądarek zarówno nowych, jak i starych.

Rozwiązanie jest złożone, ale proste. Pierwszym krokiem jest skorzystanie z CSS i wybranie typu pliku wejściowego z „pod-elementami”, które pokazują się, ponieważ ma krycie równe 0. Kolejnym krokiem jest użycie JavaScript do aktualizacji etykiety w razie potrzeby.

HTML _{Identyfikatory są po prostu wstawiane, jeśli chcesz szybko uzyskać dostęp do określonego elementu, jednak klasy są koniecznością, ponieważ odnoszą się do CSS, który konfiguruje cały ten proces}

<div class="file-input wrapper">
    <input id="inpFile0" type="file" class="file-input control" />
    <div class="file-input content">
        <label id="inpFileOutput0" for="inpFileButton" class="file-input output">Click Here</label>
        <input id="inpFileButton0" type="button" class="file-input button" value="Select File" />
    </div>
</div>

CSS _{Należy pamiętać, że kolorystyka i style czcionek są całkowicie preferowane, jeśli korzystasz z tego podstawowego CSS, zawsze możesz użyć znaku końcowego do stylu, jak chcesz, jest to pokazane na liście jsFiddle na końcu.}

.file-test-area {
    border: 1px solid;
    margin: .5em;
    padding: 1em;
}
.file-input {
    cursor: pointer !important;
}
.file-input * {
    cursor: pointer !important;
    display: inline-block;
}
.file-input.wrapper {
    display: inline-block;
    font-size: 14px;
    height: auto;
    overflow: hidden;
    position: relative;
    width: auto;
}
.file-input.control {
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;

    height: 100%;
    position: absolute;
    text-align: right;
    width: 100%;
    z-index: 2;
}
.file-input.content {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 1;
}
.file-input.output {
    background-color: #FFC;
    font-size: .8em;
    padding: .2em .2em .2em .4em;
    text-align: center;
    width: 10em;
}
.file-input.button {
    border: none;
    font-weight: bold;
    margin-left: .25em;
    padding: 0 .25em;
}

JavaScript _{Czysta i prawdziwa, jednak niektóre przeglądarki OLDER (wycofane) mogą nadal mieć z tym problem (np. Netscrape 2!)}

var inp = document.getElementsByTagName('input');
for (var i=0;i<inp.length;i++) {
    if (inp[i].type != 'file') continue;
    inp[i].relatedElement = inp[i].parentNode.getElementsByTagName('label')[0];
    inp[i].onchange /*= inp[i].onmouseout*/ = function () {
        this.relatedElement.innerHTML = this.value;
    };
};

Działający przykład jsFiddle

To działa :

Ze względów bezpieczeństwa w Firefoksie i Operze nie można uruchomić kliknięcia pliku wejściowego, ale można przeprowadzić symulację za pomocą 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">

Wiem, że to jest stare, a wszystkie te rozwiązania to hacki wokół środków bezpieczeństwa przeglądarki z prawdziwą wartością.

Powiedział, że na dzień dzisiejszy fileInput.click () działa w bieżącym Chrome (36.0.1985.125 m) i bieżącym Firefox ESR (24.7.0), ale nie w bieżącym IE (11.0.9600.17207). Nakładanie pola pliku z kryciem 0 na przycisk działa, ale chciałem elementu odsyłacza jako widocznego wyzwalacza, a podkreślenie najechania nie działa w żadnej przeglądarce. Miga, a następnie znika, prawdopodobnie przeglądarka zastanawia się, czy styl najechania faktycznie ma zastosowanie, czy nie.

Ale znalazłem rozwiązanie, które działa we wszystkich tych przeglądarkach. Nie twierdzę, że przetestowałem każdą wersję każdej przeglądarki lub że wiem, że będzie działać wiecznie, ale wydaje się, że teraz spełnia moje potrzeby.

To proste: ustaw pole wprowadzania pliku poza ekranem (pozycja: bezwzględna; góra: -5000px), umieść wokół niego element etykiety i uruchom kliknięcie etykiety zamiast samego pola pliku.

Zauważ, że link musi zostać napisany w skrypcie, aby wywołać metodę kliknięcia etykiety, nie robi to automatycznie, na przykład po kliknięciu tekstu w elemencie etykiety. Najwyraźniej element linku rejestruje kliknięcie i nie przenika do etykiety.

Zauważ również, że nie zapewnia to sposobu pokazania aktualnie wybranego pliku, ponieważ pole jest poza ekranem. Chciałem przesłać natychmiast po wybraniu pliku, więc nie jest to dla mnie problemem, ale będziesz potrzebować nieco innego podejścia, jeśli Twoja sytuacja jest inna.

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>

Ten kod działa dla mnie. Czy to właśnie próbujesz zrobić?

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

Moje rozwiązanie dla Safari z jQuery i jQuery-ui:

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

Oto czyste rozwiązanie JavaScript tego problemu. Działa dobrze we wszystkich przeglądarkach

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

Istnieją sposoby przekierowania zdarzeń do kontrolki, ale nie oczekuj, że będziesz w stanie łatwo wywołać zdarzenia do kontrolki, ponieważ przeglądarki spróbują ją zablokować ze względów (dobrych) bezpieczeństwa.

Jeśli potrzebujesz, aby okno dialogowe pliku wyświetlało się tylko, gdy użytkownik kliknie coś, powiedzmy, ponieważ chcesz lepiej wyglądających przycisków przesyłania plików, możesz rzucić okiem to, co wymyślił Shaun Inman .

Byłem w stanie osiągnąć wyzwalanie klawiatury dzięki kreatywnemu przełączaniu ostrości pomiędzy kontrolą skrótu klawiszowego, naciśnięciem klawisza i zdarzeniami kluczowymi. YMMV.

Moją szczerą radą jest pozostawienie tego w spokoju, ponieważ jest to świat bólu niezgodności z przeglądarkami. Niewielkie aktualizacje przeglądarki mogą również blokować sztuczki bez ostrzeżenia i konieczne może być wymyślanie na nowo hacków, aby działało.

Badałem to jakiś czas temu, ponieważ chciałem utworzyć niestandardowy przycisk, który otworzy okno dialogowe pliku i natychmiast rozpocznie przesyłanie. Właśnie zauważyłem coś, co może to umożliwić - Firefox wydaje się otwierać okno dialogowe po kliknięciu dowolnego miejsca na przesyłanym pliku. Więc mogą to zrobić:

1. Utwórz przesyłanie pliku i oddzielny element zawierający obraz, którego chcesz użyć jako przycisku
2. Ułóż je tak, aby zachodziły na siebie, a element tła i obramowanie elementu przezroczystego, aby przycisk był jedyną widoczną rzeczą
3. Dodaj javascript, aby IE otwierało okno dialogowe po kliknięciu przycisku / pliku wejściowego
4. Użyj zdarzenia onchange, aby przesłać formularz po wybraniu pliku

Jest to tylko teoretyczne, ponieważ użyłem już innej metody rozwiązania problemu, ale może po prostu działać.

Miałem <input type="button">tag ukryty w widoku. To, co zrobiłem, było dołączenie"onClick" zdarzenia do dowolnego widocznego elementu dowolnego typu, takiego jak etykieta. Dokonano tego za pomocą Narzędzi programistycznych Google Chrome lub Firebug Mozilli Firefox za pomocą polecenia „edytuj HTML” prawym przyciskiem myszy. W tym przypadku określ następujący skrypt lub coś podobnego:

Jeśli masz JQuery:

$('#id_of_component').click();

Jeśli nie:

document.getElementById('id_of_component').click();

Dzięki.

Hej, to rozwiązanie działa. do pobrania powinniśmy używać MSBLOB

$scope.getSingleInvoicePDF = function(invoiceNumberEntity) {
   var fileName = invoiceNumberEntity + ".pdf";
   var pdfDownload = document.createElement("a");
   document.body.appendChild(pdfDownload);

   AngularWebService.getFileWithSuffix("ezbillpdfget",invoiceNumberEntity,"pdf" ).then(function(returnedJSON) {
       var fileBlob = new Blob([returnedJSON.data], {type: 'application/pdf'});
       if (navigator.appVersion.toString().indexOf('.NET') > 0) { // for IE browser
           window.navigator.msSaveBlob(fileBlob, fileName);
       } else { // for other browsers
           var fileURL = window.URL.createObjectURL(fileBlob);
           pdfDownload.href = fileURL;
           pdfDownload.download = fileName;
           pdfDownload.click();      
       }
   });
};

Dla AngularJS lub nawet dla normalnego javascript.

Będzie to teraz możliwe w Firefoksie 4, z zastrzeżeniem, że liczy się ono jako okno wyskakujące, a zatem będzie blokowane za każdym razem, gdy byłoby to okno wyskakujące.

Oto rozwiązanie, które działa dla mnie: 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 z „małą” pomocą JQuery:

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

Tylko upewnij się, że maskowane jest całkowicie objęte prawdziwym polem przesyłania.

Możesz to zrobić zgodnie z odpowiedzią z okna dialogowego Otwórz plik na znaczniku <a>

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

Odkryłem, że jeśli dane wejściowe (plik) są poza formą, uruchomienie zdarzenia kliknięcia wywołuje okno dialogowe pliku.

Mam nadzieję, że to komuś pomoże - spędziłem 2 godziny waląc w nie głową:

W IE8 lub IE9, jeśli uruchomisz otwieranie pliku wejściowego za pomocą javascript w jakikolwiek sposób (wierz mi, że wypróbowałem je wszystkie), nie pozwoli ci przesłać formularza za pomocą javascript, po prostu po cichu zawiedzie.

Przesłanie formularza za pomocą zwykłego przycisku wysyłania może działać, ale wywoływanie form.submit (); po cichu zawiedzie.

Musiałem uciekać się do nałożenia przycisku wyboru pliku przezroczystym plikiem wejściowym, który działa.

To działało dla mnie:

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

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

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

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 wtedy, gdy jest to funkcja, która została wywołana przez zdarzenie click.

Więc możesz 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);      
    }

Możesz użyć

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