Saya ingin membuat acara klik diaktifkan pada <input type="file">tag secara terprogram.

Memanggil klik saja () tampaknya tidak melakukan apa-apa atau setidaknya tidak memunculkan dialog pemilihan file.

Saya telah bereksperimen dengan menangkap acara menggunakan pendengar dan mengarahkan kembali acara tersebut, tetapi saya belum bisa mendapatkannya untuk benar-benar melakukan acara seperti seseorang mengkliknya.

Anda tidak dapat melakukan itu di semua browser, seharusnya IE melakukannya mengizinkannya, tetapi Mozilla dan Opera mengizinkannya.

Ketika Anda menulis pesan di GMail, fitur 'lampirkan file' diterapkan satu cara untuk IE dan browser apa pun yang mendukung ini, dan kemudian diimplementasikan cara lain untuk Firefox dan browser yang tidak.

Saya tidak tahu mengapa Anda tidak bisa melakukannya, tetapi satu hal yang merupakan risiko keamanan, dan yang tidak boleh Anda lakukan di browser apa pun, adalah secara terprogram mengatur nama file pada elemen File HTML.

Saya telah mencari solusi sepanjang hari ini. Dan ini adalah kesimpulan yang saya buat:

1. Untuk alasan keamanan, Opera dan Firefox tidak memungkinkan untuk memicu input file.
2. Satu-satunya alternatif yang nyaman adalah membuat input file "tersembunyi" (menggunakan opacity, bukan "hidden" atau "display: none"!) Dan kemudian membuat tombol "di bawah" itu. Dengan cara ini tombol terlihat tetapi pada klik pengguna sebenarnya mengaktifkan input file.

Semoga ini membantu! :)

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

Anda dapat mem-klik () pada browser apa saja tetapi beberapa browser membutuhkan elemen untuk terlihat dan fokus. Inilah contoh jQuery:

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

Ia bekerja dengan hide sebelum click()tetapi saya tidak tahu apakah itu berfungsi tanpa memanggil metode show. Belum pernah mencoba ini di Opera, saya diuji pada IE / FF / Safari / Chrome dan berhasil. Saya harap ini akan membantu.

INI MUNGKIN: Di bawah FF4 +, Opera?, Chrome: tetapi:

1. inputElement.click()harus dipanggil dari konteks aksi pengguna! (bukan konteks eksekusi skrip)

2. <input type="file" />harus terlihat ( inputElement.style.display !== 'none') (Anda dapat menyembunyikannya dengan visibilitas atau sesuatu yang lain, tetapi bukan properti "display")

Bagi mereka yang mengerti bahwa Anda harus menampar formulir yang tidak terlihat di atas tautan, tetapi terlalu malas untuk menulis, saya menulisnya untuk Anda. Ya, bagi saya, tetapi mungkin juga berbagi. Komentar diterima.

HTML (Di Suatu Tempat):

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

HTML (Di tempat yang tidak Anda pedulikan):

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

Coba solusi ini: http://code.google.com/p/upload-at-click/

cukup gunakan label tag, dengan cara itu Anda bisa menyembunyikan input, dan membuatnya bekerja melalui label terkait https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label

Jika Anda ingin clickmetode ini berfungsi di Chrome, Firefox, dll, terapkan gaya berikut ke file input Anda. Ini akan disembunyikan dengan sempurna, seperti Anda melakukandisplay: none;

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

Sesederhana itu, saya mengujinya berfungsi!

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

Bekerja untuk saya ketika saya mengalami masalah yang sama, itu adalah eRube Goldberg biasa.

SOLUSI KERJA

Izinkan saya menambahkan ke posting lama ini, solusi yang saya gunakan untuk bekerja yang mungkin bekerja di mungkin 80% atau lebih dari semua browser baik baru maupun lama.

Solusinya kompleks namun sederhana. Langkah pertama adalah menggunakan CSS dan menyamarkan tipe file input dengan "elemen-bawah" yang muncul karena memiliki opacity 0. Langkah selanjutnya adalah menggunakan JavaScript untuk memperbarui labelnya sesuai kebutuhan.

HTML _{ID hanya disisipkan jika Anda ingin cara cepat untuk mengakses elemen tertentu, kelas-kelasnya, adalah suatu keharusan karena berkaitan dengan CSS yang mengatur seluruh proses ini}

<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 _{Perlu diingat, pewarnaan dan gaya font dan semacamnya benar-benar pilihan Anda, jika Anda menggunakan CSS dasar ini, Anda selalu dapat menggunakan tanda setelah-akhir hingga gaya sesuka Anda, ini ditunjukkan dalam jsFiddle yang terdaftar di bagian akhir.}

.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 _{Murni dan benar, namun, beberapa browser TUA (sudah pensiun) mungkin masih mengalami masalah dengan itu (seperti 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;
    };
};

Contoh jsFiddle yang berfungsi

Berhasil :

Untuk alasan keamanan pada Firefox dan Opera, Anda tidak dapat memecat klik pada input file, tetapi Anda dapat mensimulasikan dengan 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">

Saya tahu ini sudah lama, dan semua solusi ini adalah peretasan di sekitar tindakan pencegahan keamanan browser dengan nilai nyata.

Yang mengatakan, pada hari ini, fileInput.click () berfungsi di Chrome saat ini (36.0.1985.125 m) dan Firefox ESR saat ini (24.7.0), tetapi tidak di IE saat ini (11.0.9600.17207). Overlay bidang file dengan opacity 0 di atas tombol berfungsi, tapi saya ingin elemen tautan sebagai pemicu yang terlihat, dan melayang menggarisbawahi tidak cukup berfungsi di browser apa pun. Ini menyala kemudian menghilang, mungkin browser memikirkan apakah hover styling benar-benar berlaku atau tidak.

Tapi saya memang menemukan solusi yang berfungsi di semua browser itu. Saya tidak akan mengklaim telah menguji setiap versi setiap browser, atau saya tahu itu akan terus bekerja selamanya, tetapi tampaknya memenuhi kebutuhan saya sekarang.

Sederhana saja: Posisikan field input file di luar layar (position: absolute; top: -5000px), letakkan elemen label di sekitarnya, dan memicu klik pada label, alih-alih bidang file itu sendiri.

Perhatikan bahwa tautan memang perlu ditulis untuk memanggil metode klik label, itu tidak melakukannya secara otomatis, seperti ketika Anda mengklik teks di dalam elemen label. Tampaknya elemen tautan menangkap klik, dan itu tidak sampai ke label.

Perhatikan juga bahwa ini tidak memberikan cara untuk menampilkan file yang dipilih saat ini, karena bidangnya tidak aktif. Saya ingin mengirimkan segera ketika file dipilih, jadi itu bukan masalah bagi saya, tetapi Anda akan memerlukan pendekatan yang agak berbeda jika situasinya berbeda.

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>

Kode ini berfungsi untuk saya. Apakah ini yang ingin Anda lakukan?

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

Solusi saya untuk Safari dengan jQuery dan jQuery-ui:

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

Berikut ini adalah solusi JavaScript murni untuk masalah ini. Berfungsi dengan baik di semua browser

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

Ada beberapa cara untuk mengarahkan kembali acara ke kontrol tetapi jangan berharap dapat dengan mudah memecat acara ke kontrol api sendiri karena browser akan mencoba untuk memblokir itu untuk alasan keamanan (baik).

Jika Anda hanya perlu dialog file untuk muncul ketika pengguna mengklik sesuatu, katakanlah karena Anda ingin tombol unggah file yang terlihat lebih baik, maka Anda mungkin ingin melihat apa yang muncul dengan Shaun Inman .

Saya dapat mencapai pemicu keyboard dengan pengalihan kreatif fokus dan keluar dari kontrol antara peristiwa keydown, penekanan tombol & keyup. YMMV.

Saran tulus saya adalah membiarkan ini sendirian, karena ini adalah dunia browser-ketidakcocokan-sakit. Pembaruan peramban minor juga dapat memblokir trik tanpa peringatan dan Anda mungkin harus terus menciptakan kembali peretasan untuk membuatnya berfungsi.

Saya sedang meneliti ini beberapa waktu yang lalu karena saya ingin membuat tombol khusus yang akan membuka dialog file dan segera mulai mengunggah. Saya baru saja memperhatikan sesuatu yang mungkin memungkinkan - firefox tampaknya membuka dialog ketika Anda mengklik di mana saja pada unggahan. Jadi yang berikut mungkin melakukannya:

1. Buat unggahan file dan elemen terpisah yang berisi gambar yang ingin Anda gunakan sebagai tombol
2. Atur mereka untuk tumpang tindih dan membuat elemen file backgroud dan border transparan sehingga tombol adalah satu-satunya hal yang terlihat
3. Tambahkan javascript untuk membuat IE membuka dialog ketika input tombol / file diklik
4. Gunakan acara pertukaran untuk mengirimkan formulir ketika file dipilih

Ini hanya teoretis karena saya sudah menggunakan metode lain untuk menyelesaikan masalah tetapi mungkin saja berhasil.

Saya memiliki <input type="button">tag yang tersembunyi dari pandangan. Apa yang saya lakukan adalah melampirkan"onClick" acara tersebut ke komponen apa pun yang terlihat dari jenis apa pun seperti label. Ini dilakukan dengan menggunakan Alat Pengembang Google Chrome atau Firebug Mozilla Firefox menggunakan klik kanan perintah "edit HTML". Dalam acara ini tentukan skrip berikut atau yang serupa:

Jika Anda memiliki JQuery:

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

jika tidak:

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

Terima kasih.

Hai solusi ini berhasil. untuk mengunduh kita harus menggunakan 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();      
       }
   });
};

Untuk AngularJS atau bahkan untuk javascript biasa.

Ini sekarang akan dimungkinkan di Firefox 4, dengan peringatan bahwa itu dianggap sebagai jendela pop-up dan karena itu akan diblokir setiap kali jendela pop-up muncul.

Inilah solusi yang cocok untuk saya: 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 dengan bantuan JQuery "kecil":

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

Pastikan maskfied dilindungi dengan benar oleh bidang unggahan yang sebenarnya.

Anda dapat melakukan ini sesuai jawaban dari kotak Buka File Dialog pada tag <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>

Saya menemukan bahwa jika input (file) berada di luar formulir, maka mem-klik event memanggil dialog file.

Semoga ini bisa membantu seseorang - saya menghabiskan 2 jam untuk membenturkan kepala:

Di IE8 atau IE9, jika Anda memicu membuka input file dengan javascript dengan cara apa pun (percayalah, saya sudah mencoba semuanya), itu tidak akan membiarkan Anda mengirimkan formulir menggunakan javascript, itu hanya akan gagal diam-diam.

Mengirimkan formulir melalui tombol kirim biasa dapat berfungsi tetapi memanggil form.submit (); diam-diam akan gagal.

Saya harus menggunakan overlay tombol pilih file saya dengan input file transparan yang berfungsi.

Ini bekerja untuk saya:

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

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

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

bukan tidak mungkin:

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

Tapi entah bagaimana itu hanya berfungsi jika ini dalam fungsi yang dipanggil melalui event klik.

Jadi, Anda mungkin memiliki pengaturan berikut:

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

Kamu bisa memakai

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