jQuery tetikleyici dosya girişi

163

JQuery kullanarak bir yükleme kutusunu (gözat düğmesi) tetiklemeye çalışıyorum.
Şimdi denedim yöntemi: 

$('#fileinput').trigger('click');

Ama işe yaramıyor gibi görünüyor. Lütfen yardım et. Teşekkür ederim.

javascript  jquery  css 
— Alec Akıllı
kaynak
Sen gibi bir şey deneyebilirsiniz bu yerine.
— Kirtan
19
Bunu yapmanın bir yolu yok mu? Ne kadar iç karartıcı.
— Marcus Downing
Gerçekten iç karartıcı ve cidden 'klik' ile tetikleniyor mu? Çok sıkı API ve sadece FileReference.browse kullanıcı tarafından başlatılan bir giriş olay işleyicisi çağrılmasını sağlayan güçlü güvenlik modeli ile Flash / AS3 tercih ederim. Dahası, HTML dosya girişi çirkin ve stilize değil (sadece bir giriş etiketi, içerik ve stilin ayrılması için çok fazla), bu yüzden bir tıklama etkinliği tarafından etkinleştirilen yeni bir 'göz at' düğmesi yapmanız gerekiyor ... bu da dosya girişine bir tıklama olarak iletmeniz gerekir ... bu, eleman yerleşimi ve olay yetkisi özelliğine bağlı olarak sonsuz özyinelemeye yol açabilir.
— Triynko
Ne yazık ki, sürekli güvenlik sorunları ve içerik engelleyicilerin yükselişi göz önüne alındığında, Flash kullanımı gittikçe daha az uygulanabilir hale geliyor.
— Tim

Yanıtlar:

195

Bu bir güvenlik kısıtlamasından kaynaklanmaktadır.

Güvenlik kısıtlamasının yalnızca veya olarak <input type="file"/>ayarlandığında olduğunu öğrendim .display:none;visbilty:hidden

İ ayarlayarak görünümün dışında konumlandırarak çalıştı Yani position:absoluteve top:-100px;ve işte budur çalışıyor.

bkz. http://jsfiddle.net/DSARd/1/

buna bir hack deyin.

Umarım bu işe yarar.

— adardesign
kaynak
4
ff 3.6'da çalışmaz. krom ve hatta yani 8 olsa çalışıyor :)
— AyKarsi
4
Msdn'de güvenlik kısıtlaması hakkında herhangi bir belge var mı?
— eomeroff
2
Harika çalışıyor. Her durumda daha güvenli olduğunu düşünüyorum a left: -100px;. Bir sayfanın ne kadar uzun olabileceğini asla bilemezsiniz
— Alter Lagos
+1 Bu gerçek cevap (ve iyi bir çözüm). Herkesin açıkça belirtildiği belgelere bağlantısı olabilir mi?
— kontur
9
opaklığı da 0 olarak ayarlayabilirsiniz
— Stuart
109

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

JS:

$('#fileinput').trigger('click');

HTML:

<div class="hiddenfile">
  <input name="upload" type="file" id="fileinput"/>
</div>

CSS:

.hiddenfile {
 width: 0px;
 height: 0px;
 overflow: hidden;
}

>>> Çapraz Tarayıcıda çalışan bir tane daha: <<<

Fikir, özel düğmenizin üzerine görünmez bir büyük "Gözat" düğmesine bindirmenizdir. Kullanıcı özel düğmenizi tıkladığında, gerçekte yerel giriş alanının "Gözat" düğmesini tıklar.

JS Fiddle: http://jsfiddle.net/5Rh7b/

HTML:

<div id="mybutton">
  <input type="file" id="myfile" name="upload"/>
  Click Me!
</div>

CSS:

div#mybutton {

  /* IMPORTANT STUFF */
  overflow: hidden;
  position: relative;   

  /* SOME STYLING */
  width:  50px;
  height: 28px;
  border: 1px solid green;
  font-weight: bold
  background: red;
}

div#mybutton:hover {
  background: green;
}

input#myfile {
  height: 30px;
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 100px;
  z-index: 2;

  opacity: 0.0; /* Standard: FF gt 1.5, Opera, Safari */
  filter: alpha(opacity=0); /* IE lt 8 */
  -ms-filter: "alpha(opacity=0)"; /* IE 8 */
  -khtml-opacity: 0.0; /* Safari 1.x */
  -moz-opacity: 0.0; /* FF lt 1.5, Netscape */
}

JavaScript:

$(document).ready(function() {
    $('#myfile').change(function(evt) {
        alert($(this).val());
    });
});
— kızak
kaynak
Düğmeyi daha geniş yaparsanız, IE9 / 10'da görünmez yükleme düğmesi sağ düğmeden ve sol metin alanından yapılır. Bu konuda çift tıklamanız gerekiyor. Bu durumda, yazı tipi boyutunu 100 pikselden daha büyük ayarlamaya çalışın;
— yunzen
Bu, Chrome 53'te bile çalışır. Ancak, bunun heightdeğiştirilmesi önerilirheight: 100%
— Raptor
İkincisi iOS'ta Safari'de bile çalışıyor. Çok hoş!
— Jannis
71

LABEL öğesini ex.

<div>
    <label for="browse">Click Me</label>
    <input type="file" id="browse" name="browse" style="display: none">//
</div>
Snippet'i genişlet

Bu giriş dosyasını tetikleyecektir

— Jhon Rey
kaynak
5
Bu neden kabul edilen cevap değil? Funky javascript gerektirmeyen en basit yol.
— tomitrescak
@tomitrescak OP en iyi cevabı almak için beklemiyor.
— Mahi
9
Cevabın, soru gönderildikten 7 yıl sonra gönderildiğini unutmayın.
1
2018'de de en iyi cevap.
— masoomyf
1
2019 için de en iyi cevap;)
— guillaumepotier
17

IE8 +, son FF ve krom çalışma (= test edilmiş) var:

$('#uploadInput').focus().trigger('click');

Anahtar, tıklamayı tetiklemeden önce odaklanır (aksi takdirde krom onu ​​yok sayar).

Not: girişinizin görüntülenmesi ve görünür olması gerekir (olduğu gibi, değil display:noneve değil visibility:hidden). Girişi (daha önce olduğu gibi) kesinlikle girişi konumlandırıp ekrandan atmanızı öneririm.

#uploadInput {
    position: absolute;
    left: -9999px;
}
— Güçlü Lastik Ördek
kaynak
1
Bunun için +1. Ayrıca, çevredeki öğeyi gizleyebildiğinizi ancak dosya giriş düğmesini değil, sonra çevreleyen öğeyi gösterebileceğinizi, düğmeyi odaklayabileceğinizi, etkinleştirebildiğinizi ve düğmeyi gizleyebileceğinizi fark ettim.
— Stevo
10

Kemanımı kontrol et.

http://jsfiddle.net/mohany2712/vaw8k/

.uploadFile {
  visibility: hidden;
}

#uploadIcon {
  cursor: pointer;
}
<body>
  <div class="uploadBox">
    <label for="uploadFile" id="uploadIcon">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Icon_-_upload_photo_2.svg/512px-Icon_-_upload_photo_2.svg.png"  width="20px" height="20px"/>
    </label>
    <input type="file" value="upload" id="uploadFile" class="uploadFile" />
  </div>
</body>
Snippet'i genişlet

— Mohan
kaynak
9

adardesign , gizlendiğinde yoksayılan dosya giriş öğesine ilişkin çivilenmiştir. Ayrıca birçok kişinin eleman boyutunu 0'a kaydırdığını veya konumlandırma ve taşma ayarlarıyla sınırların dışına çıkardığını fark ettim. Bunların hepsi harika fikirler.
Mükemmel bir şekilde iyi işleyen alternatif bir yol da opaklığı 0'a ayarlamaktır . Ardından, diğer öğeleri dengelemesini engellemek için konumu her zaman ayarlayabilirsiniz gizle gibi . Bir öğeyi herhangi bir yönde yaklaşık 10K piksel kaydırmak biraz gereksiz görünüyor.

İşte bir tane isteyenler için küçük bir örnek:

input[type='file']{
    position:absolute;
    opacity:0;
    /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /* For IE5 - 7 */
    filter: alpha(opacity=0);
}
— eyegropram
kaynak
7

Sadece merak uğruna, DOM ağacına eklemeden dinamik olarak bir yükleme formu ve giriş dosyası oluşturarak istediğiniz gibi bir şey yapabilirsiniz:

$('.your-button').on('click', function() {
    var uploadForm = document.createElement('form');
    var fileInput = uploadForm.appendChild(document.createElement('input'));

    fileInput.type = 'file';
    fileInput.name = 'images';
    fileInput.multiple = true;

    fileInput.click();
});

UploadForm'u DOM'ye eklemenize gerek yok.

— jairhumberto
kaynak
1
TEŞEKKÜR EDERİM! Bunu 20 dakikadır arıyordum!
— Labo
5

Doğru kod:

<style>
    .upload input[type='file']{
        position: absolute;
        float: left;
        opacity: 0; /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* For IE5 - 7 */
        filter: alpha(opacity=0);
        width: 100px; height: 30px; z-index: 51
    }
    .upload input[type='button']{
        width: 100px;
        height: 30px;
        z-index: 50;
    }
    .upload input[type='submit']{
        display: none;
    }
    .upload{
        width: 100px; height: 30px
    }
</style>
<div class="upload">
    <input type='file' ID="flArquivo" onchange="upload();" />
    <input type="button" value="Selecionar" onchange="open();" />
    <input type='submit' ID="btnEnviarImagem"  />
</div>

<script type="text/javascript">
    function open() {
        $('#flArquivo').click();
    }
    function upload() {
        $('#btnEnviarImagem').click();
    }
</script>
— E9 Sistemas
kaynak
4

Aslında, bunun için gerçekten kolay bir yöntem buldum:

$('#fileinput').show().trigger('click').hide();

Bu şekilde, dosya giriş alanınızın hiçbiri üzerinde css özelliği görüntülenebilir ve yine de ticareti kazanabilirsiniz :)

— skywlkr
kaynak
daha yavaş makinede ekranda kayabilir. Optimal bir çözüm değil
— Dmitry Efimenko
4

Cevap vermek için çok geç ama bence bu minimal kurulum en iyi sonucu veriyor. Ben de aynısını arıyorum.

  <div class="btn-file">
     <input type="file" class="hidden-input">
     Select your new picture
  </div>

// css

.btn-file {
  display: inline-block;
  padding: 8px 12px;
  cursor: pointer;
  background: #89f;
  color: #345;
  position: relative;
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  filter: alpha(opacity=0);
  opacity: 0;
  cursor: inherit;
  display: block;
}

jsbin

bootstrap dosyası giriş düğmeleri demosu

— Natwar Singh
kaynak
cevap vermek için asla geç değildir;)
— AGuyCalledGerald 16
Birkaç yıl sonra hala en iyi IMO cevabı
— DimmuR
4

Bu çok eski bir soru, ancak maalesef bu konu hala alakalı ve bir çözüm gerektiriyor.

Geldiğim (şaşırtıcı derecede basit) çözüm, gerçek dosya giriş alanını "gizlemek" ve bir LABEL etiketi ile sarmaktır (geliştirme için Bootstrap ve HTML5'e dayanabilir).

See here:Burada örnek kod

Bu şekilde, gerçek dosya giriş alanı görünmez olur ve gördüğünüz tek şey, aslında değiştirilmiş bir LABEL öğesi olan özelleştirilmiş "düğme" dir. Bu ETİKET öğesini tıkladığınızda, bir dosya seçme penceresi açılır ve seçtiğiniz dosya gerçek dosya giriş alanına girer.

Bunun üzerine, görünümü ve davranışı istediğiniz gibi değiştirebilirsiniz (örneğin: seçildikten sonra seçilen dosyanın adını dosya girdi dosyasından alın ve bir yerde gösterin. LABEL öğesi bunu otomatik olarak yapmaz, Genellikle metin içeriği olarak LABEL'in içine koydum).

Yine de dikkat edin! Bunun görünüşünün ve davranışının manipülasyonu, hayal edebileceğiniz ve düşünebileceğiniz her şeyle sınırlıdır. ;-) ;-)

— TheCuBeMan
kaynak
3

Basit bir $ (...) ile başardım. Click (); JQuery 1.6.1 ile

— Valentin Galea
kaynak
1
Hmm bunu nasıl yaptığınızı merak ediyorum, web sitemde (www.iscriptdesign.com) bir $ ('file: input') yapıyor. Click () hiçbir şey yapmaz ve $ ('file: input') yapmaz. Trigger (' Tıklayın');
— dr jerry
İşte tam örnek: <input type = "file" id = "picBrowse" ... ve ardından $ ('# picBrowse'). Click ();
— Valentin Galea
Mac OS'de cr (hangi sürümden emin değilim) üzerinde test yaptım, XP'de FF 4 üzerinde çalışıyor. Teşekkürler!
— dr jerry
3

ya da basitçe

$(':input[type="file"]').show().click().hide();
— Otvazhnii
kaynak
2

i <input type="file"/>tetiklemek için sahte bir düğme kullanırken özel istemci tarafı doğrulama ile ilgili sorunlar vardı ve @Guillaume Bodi çözümü (ayrıca opacity: 0;krom ile) benim için çalıştı

$("#MyForm").on("click", "#fake-button", function () {
        $("#uploadInput").focus().trigger("click");
    });

ve yükleme girişi için css stili 

#uploadInput {
opacity: 0.0; 
filter: alpha(opacity=0); /* IE lt 8 */
-ms-filter: "alpha(opacity=0)"; /* IE 8 */
-khtml-opacity: 0.0; /* Safari 1.x */
-moz-opacity: 0.0;
}
— Amin K
kaynak
1

Bunu dene, bu bir hack. Konum: mutlak Chrome içindir ve tetikleyici ('değişiklik') IE içindir.

var hiddenFile = $("<input type=\"file\" name=\"file\" id=\"file1\" style=\"position:absolute;left:-9999px\" />");
$('body').append(hiddenFile);

$('#aPhotoUpload').click(function () {
    hiddenFile.trigger('click');
    if ($.browser.msie)
        hiddenFile.trigger('change');
});

hiddenFile.change(function (e) {
    alert('TODO');
});
— thinpiglin
kaynak
Not $.browser: jQuery
— Kevin Beal'ın
1

Sorunum iOS 7'de biraz farklıydı. FastClick'in sorunlara neden olduğu ortaya çıktı. Tek yapmam gereken düğüme eklemekti class="needsclick".

— Dex
kaynak
0

Bu, çapraz tarayıcı sorunlarını göz önünde bulundurarak muhtemelen en iyi cevaptır.

CSS:

#file {
  opacity: 0;
  width: 1px;
  height: 1px;
}

JS:

$(".file-upload").on('click',function(){
   $("[name='file']").click();
});

HTML:

<a class="file-upload">Upload</a>
<input type="file" name="file">
— Eddsters
kaynak
0

Sanırım problemini anlıyorum, çünkü benzerim var. Bu nedenle etiketin <label>özniteliği vardır, girişinizi type = "file" ile bağlamak için bu özniteliği kullanabilirsiniz. Ancak, düzeninizin bir kuralı olduğu için bu etiketi kullanarak bunu etkinleştirmek istemiyorsanız, bunu yapabilirsiniz.

$(document).ready(function(){
  var reference = $(document).find("#main");
  reference.find(".js-btn-upload").attr({
     formenctype: 'multipart/form-data'
  });
  
  reference.find(".js-btn-upload").click(function(){
    reference.find("label").trigger("click");
  });
  
});
.hide{
  overflow: hidden;
  visibility: hidden;
  /*Style for hide the elements, don't put the element "out" of the screen*/
}

.btn{
  /*button style*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="main">
<form enctype"multipart/formdata" id="form-id" class="hide" method="post" action="your-action">
  <label for="input-id" class="hide"></label>
  <input type="file" id="input-id" class="hide"/>
</form>

<button class="btn js-btn-upload">click me</button>
</div>
Snippet'i genişlet

Tabii ki bunu kendi amacınız ve düzeniniz için uyarlayacaksınız, ancak bu çalışmayı daha kolay biliyorum!

— Leonardo Lindroth
kaynak
-1

Guillaume Bodi'nin cevabına dayanarak bunu yaptım:

$('.fileinputbar-button').on('click', function() {
    $('article.project_files > header, article.upload').show();
    $('article.project_files > header, article.upload header').addClass('active');
    $('.file_content, article.upload .content').show();
    $('.fileinput-button input').focus().click();
    $('.fileinput-button').hide();
});

Bu, tetikleyici ile başlamak ve sonra görüntülenmek ve sonra tekrar tekrar gizlemek anlamına gelir.

— Stevo
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.