Buka kotak dialog file di JavaScript

Saya membutuhkan solusi untuk menampilkan dialog file terbuka dalam HTML sambil mengklik file div. Kotak dialog file yang terbuka harus terbuka saat divdiklik.

Saya tidak ingin menampilkan kotak file input sebagai bagian dari halaman HTML. Ini harus ditampilkan dalam dialog terpisah, yang bukan merupakan bagian dari halaman web.

Ini yang bagus

Demo Pengunggah yang Baik

Itu adalah <input type='file' />kendali itu sendiri. Tapi div ditempatkan di atasnya dan gaya css diterapkan untuk mendapatkan kesan itu. Opacity dari kontrol file diatur ke 0 sehingga muncul jendela dialog terbuka saat mengklik div.

    $("#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">

untuk IE tambahkan ini:

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

Saya tidak tahu mengapa tidak ada yang menunjukkan hal ini tetapi inilah cara melakukannya tanpa Javascript dan juga kompatibel dengan browser apa pun.

EDIT: Di Safari, inputdinonaktifkan saat disembunyikan dengan display: none. Pendekatan yang lebih baik akan digunakan position: fixed; top: -100em.

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

Jika Anda lebih suka Anda bisa pergi "cara yang benar" dengan menggunakan fordalam labelmenunjuk ke idmasukan seperti ini:

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

Sebenarnya, Anda tidak membutuhkan semua itu dengan opacity, visibility, <input>styling, dll. Lihat saja:

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

Demo di jsFiddle . Diuji di Chrome 30.0 dan Firefox 24.0. Namun tidak berfungsi di Opera 12.16.

Inilah yang paling berhasil untuk saya (Diuji di IE8, FF, Chrome, Safari).

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

Penjelasan: Saya memposisikan input file tepat di atas elemen yang akan diklik, sehingga klik apa pun akan mendarat di atasnya atau labelnya (yang menarik dialog unggah seperti jika Anda mengklik label itu sendiri). Saya memiliki beberapa masalah dengan bagian tombol dari masukan default yang mencuat dari sisi label, jadi overflow: hiddenmasukan dan display: inline-blocklabel diperlukan.

Bagaimana jika javascript Dimatikan di mesin klien? Gunakan solusi berikut untuk semua skenario. Anda bahkan tidak membutuhkan javascript / jQuery. :

HTML

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

CSS

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

Penjelasan: for="Your input Id". Memicu peristiwa klik secara default oleh HTML. Jadi secara default memicu event klik, tidak perlu jQuery / javascript. Jika hanya dilakukan dengan HTML mengapa menggunakan jQuery / jScript? Dan Anda tidak tahu apakah klien menonaktifkan JS. Fitur Anda harus berfungsi meskipun JS dimatikan.

Bekerja jsFiddle (Anda tidak perlu JS, jquery)

Pertama tambahkan tag head :

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

jika Anda sudah memiliki tag script , tambahkan saja fungsi-fungsi di atas.

Di tubuh atau tag formulir Anda menambahkan:

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

Tidak peduli di mana di html Anda, sama seperti Anda telah membuat instance baru dari tipe kelas OpenFileDialog sebagai variabel global , yang namanya adalah id elemen, tidak peduli di mana dalam kode atau xaml Anda, tetapi di skrip atau kode Anda , Anda tidak bisa mengetik namanya, lalu membaca properti atau memanggil fungsi, karena ada fungsi global yang melakukan hal-hal yang tidak ditentukan dalam elemen input type = "file". Anda hanya perlu memberi fungsi ini id dari hidden input type = "file" yang merupakan nama dari instance OpenFileDialog sebagai string.

Untuk memudahkan hidup Anda dalam membuat instance dialog file terbuka ke html Anda, Anda dapat membuat fungsi yang melakukannya:

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

dan jika Anda ingin menghapus dialog file terbuka, Anda dapat membuat dan menggunakan fungsi berikut:

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

tetapi sebelum Anda menghapus dialog file terbuka, pastikan dialog itu ada dengan membuat dan menggunakan fungsi berikut:

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

dan jika Anda tidak ingin membuat dan menambahkan dialog file terbuka di badan atau tag formulir di html, karena ini menambahkan input tersembunyi type = "file" s, maka Anda dapat melakukannya di skrip menggunakan fungsi buat di atas :

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

Pastikan bahwa di dekat tubuh atau tag formulir Anda, Anda menambahkan:

onload="yourBodyOrFormId_onload()"

Anda tidak perlu melakukan baris di atas ini, jika Anda sudah melakukannya.

TIPS: Anda dapat menambahkan File JScript baru ke proyek atau situs web Anda, jika Anda belum memilikinya, dan dalam file ini Anda dapat meletakkan semua fungsi dialog file terbuka dari tag skrip dan html atau halaman formulir web, dan gunakan mereka di html atau halaman formulir web dari file JScript ini, tapi jangan lupa sebelumnya untuk menghubungkan html atau halaman formulir web ke File JScript tentunya. Anda dapat melakukannya hanya dengan menyeret file JScript ke halaman html Anda di headtag. Jika halaman Anda berbentuk web dan bukan html sederhana, dan Anda tidak memiliki tag kepala, letakkan di mana saja agar dapat berfungsi. Jangan lupa untuk mendefinisikan variabel global dalam File JScript, yang nilainya akan menjadi body atau id formulir Anda sebagai string. Setelah Anda menautkan file JScript ke html atau halaman formulir web, Anda dapat memuat acara dari tubuh formulir Anda, mengatur nilai variabel itu ke badan atau id formulir Anda. Kemudian di File JScript, Anda tidak perlu memberikan ke dokumen id badan atau formulir satu halaman lagi, cukup berikan nilai variabel itu. Anda dapat memanggil variabel bodyId atau formId atau bodyOrFormId atau nama lain yang Anda inginkan.

Semoga beruntung kawan!

Cara termudah:

#file-input {
  display: none;
}

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

Yang penting, penggunaan display: nonememastikan bahwa tidak ada tempat yang akan ditempati oleh input file tersembunyi (apa yang terjadi dengan menggunakan opacity: 0).

AFAIK Anda masih membutuhkan <input type="file">elemen, lalu Anda dapat menggunakan beberapa barang dari quirksmode untuk menatanya

Satu-satunya cara tanpanya <input type="file">adalah dengan menyematkan film flash transparan di atas div. Anda kemudian dapat menggunakan peristiwa klik yang dibuat pengguna (sesuai dengan aturan keamanan baru Flash 10) untuk memicu panggilan ke FileReference.browse flash .

Ini menawarkan ketergantungan tambahan melalui cara quirksmode tetapi sebagai imbalannya Anda mendapatkan lebih banyak acara (seperti acara progres bawaan).

Dapat digunakan

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