JavaScript'te dosya iletişim kutusunu aç

Dosya aç iletişim kutusunu HTML'de görüntülemek için bir çözüme ihtiyacım var div. Dosya aç iletişim kutusu divtıklandığında açılmalıdır .

Girdi dosyası kutusunu HTML sayfasının bir parçası olarak görüntülemek istemiyorum. Web sayfasının bir parçası olmayan ayrı bir iletişim kutusunda görüntülenmelidir.

İşte güzel bir tane

Fine Uploader demosu

Bir <input type='file' />kontrolün kendisidir. Ancak bunun üzerine bir div yerleştirilir ve bu hissi elde etmek için css stilleri uygulanır. Dosya kontrolünün opaklığı 0'a ayarlanmıştır, böylelikle div tıklandığında iletişim penceresi açılır.

    $("#logo").css('opacity','0');
    
    $("#select_logo").click(function(e){
       e.preventDefault();
       $("#logo").trigger('click');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">

IE için şunu ekleyin:

$("#logo").css('filter','alpha(opacity = 0');

Neden kimsenin buna işaret etmediğini bilmiyorum ama işte bunu herhangi bir Javascript olmadan yapmanın bir yolu ve ayrıca herhangi bir tarayıcıyla da uyumlu.

DÜZENLEME: Safari'de, inputile gizlendiğinde devre dışı bırakılır display: none. Kullanmak daha iyi bir yaklaşım olacaktır position: fixed; top: -100em.

<label>
  Open file dialog
  <input type="file" style="position: fixed; top: -100em">
</label>

İsterseniz gidebilirsiniz "Doğru yolu" kullanarak foriçinde labelhiç işaret idböyle girdi:

<label for="inputId">file dialog</label>
<input id="inputId" type="file" style="position: fixed; top: -100em">

Aslında, opaklık, görünürlük, <input>stil vb. İle ilgili tüm bu şeylere ihtiyacınız yok . Sadece bir göz atın:

<a href="#">Just click me.</a>
<script type="text/javascript">
    $("a").click(function() {
        // creating input on-the-fly
        var input = $(document.createElement("input"));
        input.attr("type", "file");
        // add onchange handler if you wish to get the file :)
        input.trigger("click"); // opening dialog
        return false; // avoiding navigation
    });
</script>

JsFiddle üzerinde demo . Chrome 30.0 ve Firefox 24.0'da test edilmiştir. Ancak Opera 12.16'da çalışmadı.

Benim için en iyi sonuç veren buydu (IE8, FF, Chrome, Safari'de test edildi).

#file-input {
  cursor: pointer;
  outline: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  filter: alpha(opacity=0); /* IE < 9 */
  opacity: 0;
}
.input-label {
  cursor: pointer;
  position: relative;
  display: inline-block;
}

<label for="file-input" class="input-label">
  Click Me <!-- Replace with whatever text or icon you wish to use -->
  <input type="file" id="file-input">
</label>

Açıklama: Dosya girişini, tıklanacak öğenin hemen üzerine yerleştirdim, böylece herhangi bir tıklama ya üzerine ya da etiketi üzerine gelirdi (bu, tıpkı etiketin kendisine tıklamışsınız gibi yükleme iletişim kutusunu açar). Varsayılan girişin düğme kısmının etiketin kenarından dışarı çıkmasıyla ilgili bazı sorunlar yaşadım, bu nedenle overflow: hiddengirişte ve display: inline-blocketikette gerekliydi.

İstemci makinesinde javascript Kapalıysa ne olur? Tüm senaryolar için aşağıdaki çözümü kullanın. Hatta javascript / jQuery'ye ihtiyacınız yok. :

HTML

<label for="fileInput"><img src="File_upload_Img"><label>
<input type="file" id="fileInput"></label>

CSS

#fileInput{opacity:0}  
body{
    background:cadetblue;
}

Açıklama: for="Your input Id". Varsayılan olarak HTML ile tıklama olayını tetikler. Bu yüzden varsayılan olarak tıklama olayını tetikler, jQuery / javascript'e gerek yoktur. Basitçe HTML ile yapılıyorsa neden jQuery / jScript kullanılsın? Ve istemcinin JS'yi devre dışı bırakıp bırakmadığını anlayamazsınız. JS kapalı olsa bile özelliğiniz çalışmalıdır.

Çalışma jsFiddle (JS, jquery'ye ihtiyacınız yok)

Önce başlık etiketlerini ekleyin :

<script>
   function showDialog(openFileDialog) {
       document.getElementById(openFileDialog).click();
   }
   function fileName(openFileDialog) {
       return document.getElementById(openFileDialog).value;
   }
   function hasFile(openFileDialog) {
       return document.getElementById(openFileDialog).value != "";
   }
   function fileNameWithoutFakePath(openFileDialog) {
       var fileName = document.getElementById(openFileDialog).value;
       return fileName.substr(fileName.lastIndexOf('\\') + 1);
   }
   function fakePathWithoutFileName(openFileDialog) {
       var fileName = document.getElementById(openFileDialog).value;
       return fileName.substr(0, fileName.lastIndexOf('\\'));
   }
</script>

zaten senaryonuz varsa etiketleriniz varsa, bu işlevleri yukarıya eklemeniz yeterlidir.

Sizin de vücudun veya formu ekleyerek etiketleri:

<input type="file" style="display:none" id="yourDesiredOrFavoriteNameForTheNewOpenFileDialogInstance"/>

HTML'nizin neresinde olursa olsun, tıpkı kodunuzda veya xaml'de nerede olursa olsun, ancak komut dosyanızda veya kodunuzda global değişken olarak adı öğenin kimliği olan yeni bir OpenFileDialog sınıfı örneği oluşturmuş olmanız gibidir. , sen yapamazsın eleman input type = "file" tanımlanmamış olanlar bunu küresel fonksiyonlar olduğundan, onun adını yazın ve sonra bir işlevi bir özellik okumak veya arayın. Bu işlevlere, dizge olarak OpenFileDialog örneğinin adı olan gizli girdi türü = "dosya" kimliğini vermeniz yeterlidir.

HTML'nizde açık dosya diyalog örnekleri oluştururken hayatınızı kolaylaştırmak için, bunu yapan bir işlev yapabilirsiniz:

function createAndAddNewOpenFileDialog(name) {
     document.getElementById("yourBodyOrFormId").innerHtml += "<input type='file' style='display:none' id='" + name + "'/>"
}

ve açık dosya iletişim kutusunu kaldırmak isterseniz, aşağıdaki işlevi oluşturabilir ve kullanabilirsiniz:

function removeOpenFileDialog(name) {
    var html = document.getElementById("yourBodyOrFormId").innerHtml;
    html = html.replace("<input type='file' style='display:none' id='" + name + "'/>", "");
    document.getElementById("yourBodyOrFormId").innerHtml = html;
}

ancak açık dosya iletişim kutusunu kaldırmadan önce, aşağıdaki işlevi yaparak ve kullanarak var olduğundan emin olun:

function doesOpenFileDialogExist(name) {
    return document.getElementById("yourBodyOrFormId").innerHtml.indexOf("<input type='file' style='display:none' id='" + name + "'/>") != -1
}

ve html'deki gövde veya form etiketlerinde dosya açma diyalogları oluşturmak ve eklemek istemiyorsanız , çünkü bu gizli input type = "file" s ekliyor, o zaman yukarıdaki create işlevini kullanarak bunu komut dosyasında yapabilirsiniz :

function yourBodyOrFormId_onload() {
    createAndAddNewOpenFileDialog("openFileDialog1");
    createAndAddNewOpenFileDialog("openFileDialog2");
    createAndAddNewOpenFileDialog("openFileDialog3");
    createAndAddNewOpenFileDialog("File Upload");
    createAndAddNewOpenFileDialog("Image Upload");
    createAndAddNewOpenFileDialog("bla");
    //etc and rest of your code
}

Gövde veya form etiketlerinizin yakınına şunları eklediğinizden emin olun:

onload="yourBodyOrFormId_onload()"

Zaten yaptıysanız, yukarıdaki satırı yapmak zorunda değilsiniz.

İPUCU: Henüz sahip değilseniz, projenize veya web sitenize yeni JScript Dosyası ekleyebilir ve bu dosyada tüm açık dosya diyalog işlevlerini komut dosyası etiketlerinden ve html veya web form sayfasından uzağa koyabilir ve bunları bu JScript dosyasından html veya web formu sayfanıza ekleyin, ancak html veya web formu sayfasını elbette JScript dosyasına bağlamayı unutmayın. Bunu yalnızca JScript dosyasını html sayfanıza sürükleyerek yapabilirsiniz. kafaetiketleri. Sayfanız web formuysa ve basit html değilse ve head etiketleriniz yoksa, çalışabilmesi için herhangi bir yere koyun. Bu JScript Dosyasında, değeri sizin bedeniniz olacak veya dizge olarak id oluşturacak global değişken tanımlamayı unutmayın. JScript dosyasını html veya web formu sayfanıza bağladıktan sonra, form gövdenizin olayını yükleyebilir, bu değişkenin değerini bedeninize veya form kimliğinize ayarlayabilirsiniz. Daha sonra JScript Dosyasında, artık belgeye gövde kimliğini veya bir sayfanın formunu vermeniz gerekmez, ona sadece o değişkenin değerini verin. Bu değişken bodyId veya formId veya bodyOrFormId veya istediğiniz başka bir adı çağırabilirsiniz .

İyi şanslar dostum!

En basit yol:

#file-input {
  display: none;
}

<label for="file-input">
  <div>Click this div and select a file</div>
</label>
<input type="file" id="file-input"/>

Önemli olan, öğesinin kullanımı display: none, gizli dosya girdisi tarafından hiçbir yerin işgal edilmemesini sağlar (ne olursa olsun opacity: 0).

AFAIK hala bir <input type="file">öğeye ihtiyacınız var , o zaman onu biçimlendirmek için ilginç moddaki bazı şeyleri kullanabilirsiniz .

Tek olmayan <input type="file">, div üzerine şeffaf bir flash film yerleştirmektir. Daha sonra flash'ın FileReference.browse'ı için bir çağrıyı tetiklemek için kullanıcı tarafından oluşturulan bir tıklama olayını (Flash 10 yeni güvenlik kurallarıyla uyumlu) kullanabilirsiniz. .

Tuhaf mod yöntemine göre ek bir bağımlılık sunar, ancak karşılığında çok daha fazla olay (yerleşik ilerleme olayları gibi) alırsınız.

Kullanabilir

$('<input type="file" />').click()