<input type="file">Programlı olarak bir etikete tıklama etkinliğini tetiklemek istiyorum .

Sadece click () öğesini çağırmak hiçbir şey yapmıyor veya en azından bir dosya seçimi iletişim kutusu açmıyor.

Dinleyicileri kullanarak olayları yakalamayı ve etkinliği yeniden yönlendirmeyi deniyorum, ancak birisinin tıkladığı gibi gerçekte etkinliği gerçekleştirmesini sağlayamadım.

Tüm tarayıcılarda, güya IE bunu yapamaz gelmez buna izin fakat Mozilla ve Opera yoktur.

GMail'de bir ileti oluşturduğunuzda, 'dosya ekle' özelliği IE ve bunu destekleyen tüm tarayıcılar için bir yolla uygulanır ve daha sonra Firefox ve istemeyen tarayıcılar için başka bir yol uygulanır.

Bunu yapamam neden bilmiyorum, ama bir şey olduğunu bir güvenlik riski ve herhangi tarayıcıda yapmalarına izin verilmez, hangi programlı HTML Dosyası elemanı üzerinde dosya adını ayarlanır.

Bütün gün için çözüm arıyordum. Bunlar benim çıkardığım sonuçlar:

1. Güvenlik nedeniyle Opera ve Firefox dosya girişini tetiklemeye izin vermiyor.
2. Tek uygun alternatif "gizli" bir dosya girişi oluşturmak (opaklık kullanarak, "gizli" veya "display: none"!) Ve daha sonra "aşağıda" düğmesini oluşturmaktır. Bu şekilde düğme görülür ancak kullanıcı tıklandığında dosya girişini gerçekten etkinleştirir.

Bu yardımcı olur umarım! :)

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

Herhangi bir tarayıcıda click () öğesine tıklayabilirsiniz, ancak bazı tarayıcıların öğenin görünür ve odaklanmış olması gerekir. İşte bir jQuery örneği:

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

Daha önce gizle ile çalışır click()ama show yöntemini çağırmadan çalışıp çalışmadığını bilmiyorum. Opera'da hiç denemedim, IE / FF / Safari / Chrome'da test ettim ve çalışıyor. Umarım bu yardımcı olacak.

BU MÜMKÜN: FF4 +, Opera?, Chrome: altında:

1. inputElement.click()kullanıcı eylem bağlamından çağrılmalıdır! (komut dosyası yürütme içeriği değil)

2. <input type="file" />görünür olmalıdır ( inputElement.style.display !== 'none') (görünürlük veya başka bir şeyle gizleyebilirsiniz, ancak "display" özelliği ile gizleyemezsiniz)

Bağlantı üzerinde görünmez bir formun üstesinden gelmek zorunda olduğunuzu anlayanlar, ancak yazmak için çok tembel olanlar için yazdım. Benim için, ama paylaşabilir de. Yorumlarınızı bekliyoruz.

HTML (Bir Yerde):

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

HTML (Umursadığınız bir yerde):

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

Bu çözümü deneyin: http://code.google.com/p/upload-at-click/

bir etiket etiketi kullanın, böylece girdiyi gizleyebilir ve ilgili etiketiyle çalışmasını sağlayabilirsiniz https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label

clickYöntemin Chrome, Firefox, vb. Üzerinde çalışmasını istiyorsanız, giriş dosyanıza aşağıdaki stili uygulayın. Mükemmel gizlenecek, sanki birdisplay: none;

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

Bu kadar basit, işe yaradığını test ettim!

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

Benzer bir sorunla karşılaştığımda benim için çalıştı, bu normal bir eRube Goldberg.

ÇALIŞMA ÇÖZÜMÜ

Bu eski gönderiyi, yeni ve eski tüm tarayıcıların% 80 veya daha fazlasında çalışan bir çalışma çözümü olarak ekleyeyim.

Çözüm karmaşık ancak basit. İlk adım CSS'den faydalanmak ve girdi dosya türünü 0 saydamlığı olduğu gibi görünen "alt öğeler" ile tahmin etmektir. Bir sonraki adım, etiketini gerektiği gibi güncellemek için JavaScript kullanmaktır.

HTML _{Belirli bir öğeye hızlı bir şekilde erişmek istiyorsanız kimlikler basitçe eklenir, ancak sınıflar, tüm bu süreci ayarlayan CSS ile ilgili oldukları için bir zorunluluktur.}

<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 _{Unutmayın, renklendirme ve yazı tipi stilleri ve bunlar tamamen sizin tercihinizdir, bu temel CSS'yi kullanırsanız, istediğiniz gibi stile kadar her zaman son işaretini kullanabilirsiniz, bu, sonunda listelenen jsFiddle'da gösterilir.}

.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 _{Pure and true, ancak bazı OLDER (emekli) tarayıcılarda hala sorun olabilir (Netscrape 2 gibi!)}

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

Çalışma jsFiddle Örneği

İşe yarıyor :

Firefox ve Opera'daki güvenlik nedeniyle, dosya girişine tıklamayı tetikleyemezsiniz, ancak MouseEvents ile benzetim yapabilirsiniz:

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

Bunun eski olduğunu biliyorum ve tüm bu çözümler gerçek değer ile tarayıcı güvenlik önlemleri etrafında kesmek.

Bununla birlikte, bugünden itibaren fileInput.click () öğesi geçerli Chrome'da (36.0.1985.125 m) ve geçerli Firefox ESR'de (24.7.0) çalışır, ancak geçerli IE'de (11.0.9600.17207) çalışmaz. Bir düğmenin üstünde opaklık 0 olan bir dosya alanını kaplamak işe yarar, ancak görünür tetikleyici olarak bir bağlantı öğesi istedim ve fareyle üzerine gelindiğinde alt çizgi herhangi bir tarayıcıda pek çalışmıyor. Sonra yanıp söner, muhtemelen tarayıcı fareyle üzerine gelme stilinin gerçekten geçerli olup olmadığını düşünür.

Ancak tüm bu tarayıcılarda çalışan bir çözüm buldum. Her tarayıcının her sürümünü test ettiğimi iddia etmeyeceğim veya sonsuza kadar çalışmaya devam edeceğini biliyorum, ancak şimdi ihtiyaçlarımı karşılıyor gibi görünüyor.

Çok basit: Dosya giriş alanını ekran dışına yerleştirin (konum: mutlak; üst: -5000px), çevresine bir etiket öğesi koyun ve dosya alanının kendisi yerine etikete tıklamayı tetikleyin.

Etiketin tıklama yöntemini çağırmak için bağlantının kodlanması gerektiğini unutmayın, bir etiket öğesinin içindeki metni tıkladığınızda olduğu gibi bunu otomatik olarak yapmaz. Görünüşe göre bağlantı öğesi tıklamayı yakalar ve etikete ulaşmaz.

Alanın ekran dışında olduğundan, geçerli olarak seçili dosyayı göstermek için bir yol sağlamadığını da unutmayın. Bir dosya seçildiğinde hemen göndermek istedim, bu benim için bir sorun değil, ancak durumunuz farklıysa biraz farklı bir yaklaşıma ihtiyacınız olacak.

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>

Bu kod benim için çalışıyor. Yapmaya çalıştığın şey bu mu?

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

JQuery ve jQuery-ui ile Safari için çözümüm:

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

İşte bu sorunun saf JavaScript çözümü. Tüm tarayıcılarda iyi çalışır

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

Olayları kontrole yönlendirmenin yolları vardır, ancak tarayıcılar bunu (iyi) güvenlik nedenleriyle engellemeye çalışacağından olayları kolayca yangın kontrolüne ateşleyebilmeyi beklemeyin.

Yalnızca kullanıcı bir şeyi tıkladığında görünmesi için dosya iletişim kutusuna ihtiyacınız varsa, daha iyi görünen dosya yükleme düğmeleri kullanmak istediğinizi varsayalım, o zaman Shaun Inman'ın ne ile geldiğine bakmak isteyebilirsiniz. .

Keydown, keypress ve keyup olayları arasındaki kontrolün içine ve dışına yaratıcı bir şekilde odaklanarak klavye tetikleme elde etmeyi başardım. YMMV.

Samimi tavsiyem bunu yalnız bırakmaktır, çünkü bu tarayıcı-uyumsuzluk-acı dünyasıdır. Küçük tarayıcı güncellemeleri, uyarı yapmadan püf noktalarını engelleyebilir ve çalışmasını sağlamak için korsanları yeniden keşfetmeye devam etmeniz gerekebilir.

Bir süre önce bunu araştırıyordum çünkü dosya iletişim kutusunu açacak ve yüklemeyi hemen başlatacak özel bir düğme oluşturmak istedim. Bunu mümkün kılabilecek bir şey fark ettim - yüklemede herhangi bir yeri tıkladığınızda firefox iletişim kutusunu açıyor gibi görünüyor. Yani aşağıdakiler yapabilir:

1. Düğme olarak kullanmak istediğiniz bir dosya yükleme ve görüntü içeren ayrı bir öğe oluşturun
2. Bunları üst üste binecek ve dosya öğesi backgroud ve kenarlığını şeffaf yapacak şekilde düzenleyin, böylece düğme görünür olan tek şeydir
3. Düğme / dosya girişi tıklatıldığında IE'nin iletişim kutusunu açmasını sağlamak için javascript ekleyin
4. Bir dosya seçildiğinde formu göndermek için bir onchange olayı kullanma

Bu sadece teoriktir, çünkü problemi çözmek için zaten başka bir yöntem kullandım, ancak işe yarayabilir.

<input type="button">Görünüşümden gizlenmiş bir etiketim vardı . Yaptığım şey "onClick"olayı etiket gibi herhangi bir görünür bileşene eklemekti. Bu, sağ tıklama "HTML'yi düzenle" komutu kullanılarak Google Chrome'un Geliştirici Araçları veya Mozilla Firefox'un Firebug'u kullanılarak yapıldı. Bu durumda aşağıdaki komut dosyasını veya benzer bir şeyi belirtin:

JQuery'niz varsa:

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

değilse:

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

Teşekkürler.

Hey bu çözüm işe yarıyor. indirmek için MSBLOB kullanmalıyız

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

AngularJS ve hatta normal javascript için.

Bu artık Firefox 4'te mümkün olacak ve bir açılır pencere olarak sayıldığı uyarısı olacak ve bu nedenle bir açılır pencere olduğunda engellenecek.

İşte benim için çalışan bir çözüm: 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;
}

"Küçük" JQuery yardımı ile HTML:

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

Sadece maskfied'in gerçek yükleme alanı ile tamamen kaplandığından emin olun.

Bunu cevaba göre <a> etiketi üzerindeki Dosya Aç İletişim Kutusundan yapabilirsiniz.

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

Ben girdi (dosya) form dışında ise, o zaman tetikleme olayı ateş dosya iletişim çağırır bulundu.

Umarım bu birine yardımcı olur - Başımı buna karşı vurarak 2 saat geçirdim:

IE8 veya IE9'da, herhangi bir şekilde javascript ile bir dosya girişini açmayı tetiklerseniz (inanıyorum hepsini denedim), javascript kullanarak formu göndermenize izin vermez, sadece sessizce başarısız olur.

Formun normal bir gönderme düğmesi ile gönderilmesi işe yarayabilir, ancak form.submit () öğesini çağırır; sessizce başarısız olur.

Ben çalışan şeffaf bir dosya girişi ile benim seçim dosya düğmesine bindirme başvurmak zorunda kaldı.

Bu benim için çalıştı:

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

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

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

imkansız değil:

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

Ancak bir şekilde, yalnızca bu bir tıklama etkinliği aracılığıyla çağrılan bir işlevdeyse çalışır.

Yani aşağıdaki ayarlara sahip olabilirsiniz:

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

Kullanabilirsiniz

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