input file memicu jQuery

163

Saya mencoba memicu kotak unggah (tombol browse) menggunakan jQuery.
Metode yang saya coba sekarang adalah: 

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

Tapi sepertinya itu tidak berhasil. Tolong bantu. Terima kasih.

javascript  jquery  css 
— Alec Smart
sumber
Anda dapat mencoba sesuatu seperti ini sebagai gantinya.
— Kirtan
19
Tidak ada cara untuk melakukan ini? Betapa menyedihkan.
— Marcus Downing
Memang menyedihkan, dan itu dipicu oleh 'klik', serius? Saya lebih suka Flash / AS3, dengan API yang ketat dan model keamanan yang kuat yang hanya memungkinkan FileReference.browse dipanggil dari event input handler yang dimulai oleh pengguna. Selain itu, input file HTML jelek dan tidak dapat diubah (itu hanya tag input, sangat banyak untuk pemisahan konten dan gaya), jadi Anda harus membuat tombol 'browse' baru, yang juga diaktifkan oleh acara klik ... yang harus Anda teruskan ke input file sebagai klik ... yang dapat menyebabkan rekursi tak terbatas tergantung pada penempatan elemen dan kekhususan delegasi acara.
— Triynko
Sayangnya, menggunakan Flash menjadi semakin tidak layak, mengingat masalah keamanannya yang terus-menerus, dan munculnya pemblokir konten.
— Tim

Jawaban:

195

Ini karena pembatasan keamanan.

Saya menemukan bahwa pembatasan keamanan hanya ketika <input type="file"/>diatur ke display:none;atau sedang visbilty:hidden.

Jadi saya mencoba memposisikannya di luar viewport dengan mengatur position:absolutedan top:-100px;dan menjalankannya.

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

sebut itu hack.

Semoga itu berhasil untuk Anda.

— adardesign
sumber
4
tidak bekerja di ff 3.6. bekerja di chrome dan bahkan dalam 8 yaitu :)
— AyKarsi
4
Apakah ada dokumentasi di msdn tentang pembatasan keamanan?
— eomeroff
2
Bagus sekali. Dalam hal apapun saya pikir lebih aman mengatur a left: -100px;. Anda tidak pernah tahu berapa lama bisa menjadi sebuah halaman
— Alter Lagos
+1 Ini adalah jawaban nyata (& solusi yang bagus). Adakah yang memiliki tautan ke dokumentasi di mana ini dinyatakan secara eksplisit?
— kontur
9
Anda juga dapat mengatur opacity menjadi 0
— Stuart
109

ini bekerja untuk saya:

JS:

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

HTML:

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

CSS:

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

>>> Satu lagi yang berfungsi Cross-Browser: <<<

Idenya adalah bahwa Anda overlay tombol "Browse" besar yang tak terlihat di atas tombol kustom Anda. Jadi ketika pengguna mengklik tombol kustom Anda, dia benar-benar mengklik tombol "Browse" pada kolom input asli.

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());
    });
});
— kereta luncur
sumber
Ada satu kelemahan, jika Anda membuat tombol lebih lebar, maka di IE9 / 10 tombol unggah yang tak terlihat terbuat dari tombol kanan dan bidang teks kiri. Anda harus menggandakan klik ini. Dalam hal ini coba atur ukuran font lebih besar dari 100px;
— yunzen
Ini berfungsi bahkan di Chrome 53. Namun, heightdisarankan untuk berubah keheight: 100%
— Raptor
Yang kedua bahkan berfungsi di Safari di iOS. Sangat bagus!
— Jannis
71

Anda dapat menggunakan elemen LABEL ex.

<div>
    <label for="browse">Click Me</label>
    <input type="file" id="browse" name="browse" style="display: none">//
</div>
Luaskan cuplikan

Ini akan memicu file input

— Jhon Rey
sumber
5
Mengapa ini bukan jawaban yang diterima? Ini cara paling sederhana yang tidak memerlukan javascript funky.
— tomitrescak
@tomitrescak OP tidak menunggu untuk mendapatkan jawaban terbaik.
— Mahi
9
Ingatlah bahwa jawabannya telah diposting 7 tahun setelah pertanyaan diajukan.
1
Jawaban terbaik di 2018 juga.
— masoomyf
1
Jawaban terbaik untuk 2019 juga;)
— guillaumepotier
17

Saya membuatnya bekerja (= diuji) di IE8 +, FF dan chrome baru-baru ini:

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

Kuncinya adalah fokus sebelumnya menembakkan klik (jika tidak, chrome mengabaikannya).

Catatan: Anda MEMBUTUHKAN agar input Anda ditampilkan dan terlihat (seperti pada, bukan display:nonedan tidak visibility:hidden). Saya menyarankan (seperti banyak yang lain miliki sebelumnya) untuk benar-benar memposisikan input dan membuangnya dari layar.

#uploadInput {
    position: absolute;
    left: -9999px;
}
— Bebek Karet Perkasa
sumber
1
+1 untuk itu. Saya juga memperhatikan bahwa Anda dapat menyembunyikan elemen di sekitarnya tetapi tidak pada tombol input file, lalu menunjukkan elemen di sekitarnya, memfokuskan tombol, mengaktifkannya, lalu menyembunyikan tombol.
— Stevo
10

Lihat biola saya.

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

— Mohan
sumber
9

adardesign memakukannya mengenai elemen input file yang diabaikan ketika disembunyikan. Saya juga memperhatikan banyak orang menggeser ukuran elemen ke 0, atau mendorongnya keluar dari batas dengan penyesuaian posisi dan overflow. Ini semua adalah ide bagus.
Cara alternatif yang juga tampaknya bekerja dengan sangat baik adalah dengan hanya mengatur opacity menjadi 0 . Maka Anda selalu dapat mengatur posisi agar tidak mengimbangi elemen lain seperti halnya hide. Sepertinya sedikit tidak perlu untuk menggeser elemen hampir 10K piksel ke segala arah.

Inilah sedikit contoh untuk mereka yang menginginkannya:

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

Hanya untuk rasa ingin tahu, Anda dapat melakukan sesuatu seperti yang Anda inginkan dengan secara dinamis membuat formulir unggah dan memasukkan file, tanpa menambahkannya ke pohon DOM:

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

Tidak perlu menambahkan unggahanForm ke DOM.

— jairhumberto
sumber
1
TERIMA KASIH! Saya telah mencari ini selama 20 menit!
— Labo
5

Kode yang benar:

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

Sebenarnya, saya menemukan metode yang sangat mudah untuk ini, yaitu:

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

Dengan cara ini, field input file Anda dapat memiliki properti css display pada tidak ada dan masih menang perdagangan :)

— skywlkr
sumber
mungkin mengibaskan layar pada mesin yang lebih lambat. Bukan solusi yang optimal
— Dmitry Efimenko
4

Sudah terlambat untuk menjawab tetapi saya pikir pengaturan minimal ini berfungsi dengan baik. Saya juga mencari yang sama.

  <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

demo tombol input file bootstrap

— Natwar Singh
sumber
tidak pernah terlambat untuk menjawab;)
— AGuyCalledGerald
Beberapa tahun kemudian masih jawaban terbaik IMO
— DimmuR
4

Ini adalah pertanyaan yang sangat lama, tetapi sayangnya masalah ini masih relevan dan membutuhkan solusi.

Solusi (ternyata sangat sederhana) yang saya buat adalah dengan "menyembunyikan" bidang input file aktual dan membungkusnya dengan tag LABEL (dapat didasarkan pada Bootstrap dan HTML5, untuk peningkatan).

See here:Contoh kode di sini

Dengan cara ini, bidang input file nyata tidak terlihat dan yang Anda lihat hanyalah "tombol" khusus yang sebenarnya merupakan elemen LABEL yang dimodifikasi. Ketika Anda mengklik pada elemen LABEL ini, jendela untuk memilih file muncul dan file yang Anda pilih akan masuk ke bidang input file nyata.

Selain itu, Anda dapat memanipulasi tampilan dan perilaku sesuai keinginan (misalnya: mendapatkan nama file yang dipilih dari file input file, setelah dipilih, dan memperlihatkannya di suatu tempat. Elemen LABEL tidak melakukan itu secara otomatis, tentu saja, saya biasanya hanya memasukkannya ke dalam LABEL, sebagai konten teksnya).

Waspadalah! Manipulasi tampilan dan perilaku ini terbatas pada apa pun yang dapat Anda bayangkan dan pikirkan. ;-) ;-)

— TheCuBeMan
sumber
3

Saya berhasil dengan $ (...). Klik (); dengan JQuery 1.6.1

— Valentin Galea
sumber
1
Hmm penasaran bagaimana Anda melakukan itu, di situs web saya (www.iscriptdesign.com) melakukan $ ('file: input'). Klik () tidak melakukan apa-apa, juga $ ('file: input'). Trigger (' klik');
— dr jerry
Berikut adalah contoh lengkapnya: <input type = "file" id = "picBrowse" ... dan kemudian $ ('# picBrowse'). Klik ();
— Valentin Galea
Saya diuji pada cr (tidak yakin versi apa) pada mac os, bekerja pada FF 4 di XP sekalipun. Terima kasih!
— dr jerry
3

atau yang lainnya

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

saya punya masalah dengan validasi sisi klien kustom <input type="file"/>saat menggunakan tombol palsu untuk memicunya dan solusi @Guillaume Bodi bekerja untuk saya (juga dengan opacity: 0;pada chrome)

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

dan gaya css untuk input unggahan 

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

Coba ini, ini adalah retasan. Posisi: absolut untuk Chrome dan pemicu ('perubahan') untuk IE.

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
sumber
Catatan yang $.browsersudah usang dalam versi terbaru dari jQuery
— Kevin Beal
1

Masalah saya sedikit berbeda pada iOS 7. Ternyata FastClick menyebabkan masalah. Yang harus saya lakukan adalah menambah class="needsclick"tombol saya.

— Dex
sumber
0

Ini mungkin jawaban terbaik, mengingat masalah lintas browser.

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

Saya pikir saya mengerti masalah Anda, karena saya punya yang sama. Jadi tag <label>memiliki atribut untuk, Anda dapat menggunakan atribut ini untuk menautkan input Anda dengan type = "file". Tetapi jika Anda tidak ingin mengaktifkan ini menggunakan label ini karena beberapa aturan tata letak Anda, Anda dapat melakukannya seperti ini.

$(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>
Luaskan cuplikan

Tentu saja Anda akan menyesuaikan ini untuk keperluan dan tata letak Anda sendiri, tetapi itu cara yang lebih mudah yang saya tahu untuk membuatnya bekerja !!

— Leonardo Lindroth
sumber
-1

Berdasarkan jawaban Guillaume Bodi saya melakukan ini:

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

yang artinya tersembunyi untuk memulai dan kemudian ditampilkan untuk pemicu, lalu disembunyikan lagi dengan segera.

— Stevo
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.