Ubah teks default di input type = "file"?

183

Saya ingin mengubah teks standar pada tombol " Choose File" ketika kita gunakan input="file".

masukkan deskripsi gambar di sini

Bagaimana saya bisa melakukan ini? Juga seperti yang Anda lihat di tombol gambar ada di sebelah kiri teks. Bagaimana saya bisa meletakkannya di sisi kanan teks?

html  file  input  default-value 
— Harry Joy
sumber
Ada opsi untuk mengirim teks ini ke variabel?
— kicaj
1
Jawaban oleh ParPar di sini mungkin adalah apa yang Anda cari: stackoverflow.com/questions/1944267/… .
— Aniket Suryavanshi
— Ciro Santilli “
— Michael Tarimo
— Bae

Jawaban:

49

Setiap browser memiliki rendition kontrol sendiri dan dengan demikian Anda tidak dapat mengubah teks atau orientasi kontrol.

Ada beberapa jenis "peretasan" yang mungkin ingin Anda coba jika menginginkan html/css solusi daripada Flash atau cahaya peraklarutan.

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Secara pribadi, karena sebagian besar pengguna tetap menggunakan browser pilihan mereka, dan karena itu mungkin terbiasa melihat kontrol dalam rendisi default, mereka mungkin akan bingung jika mereka melihat sesuatu yang berbeda (tergantung pada jenis pengguna yang Anda hadapi) .

— Shiv Kumar
sumber
177

Gunakan "for"atribut labeluntuk input.

<div>
  <label for="files" class="btn">Select Image</label>
  <input id="files" style="visibility:hidden;" type="file">
</div>
Di bawah ini adalah kode untuk mengambil nama file yang diunggah 

$("#files").change(function() {
  filename = this.files[0].name
  console.log(filename);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
      <label for="files" class="btn">Select Image</label>
      <input id="files" style="visibility:hidden;" type="file">
    </div>
Luaskan cuplikan

— algometrix
sumber
20
display:nonedapat digunakan pada INPUT sehingga tidak akan menggunakan ruang yang tidak diperlukan.
— Master DJ
2
Terima kasih. Ini bekerja dengan sempurna, dan persis apa yang saya cari.
— Chris - Jr
Bekerja dengan baik di Mac dengan Chrome, FF dan Safari. Jika itu juga pada IE maka ini adalah pilihan terbaik dan paling sederhana untuk gaya tombol input file. Terima kasih!
— Pod
5
berfungsi dengan baik, hanya sedikit negatif adalah bahwa pengguna tidak dapat melihat nama file yang telah dipilih saat dipilih.
— luke_mclachlan
2
@ Mike Diperbarui pos untuk mengambil nama file
— algometrix
29

Saya pikir ini yang Anda inginkan:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>
  <input type='file' id="getFile" style="display:none">
</body>

</html>
Luaskan cuplikan

— 1Cr18Ni9
sumber
27

Ini mungkin membantu seseorang di masa depan, Anda dapat menata label untuk input sesuka Anda dan memasukkan apa pun yang Anda inginkan di dalamnya dan menyembunyikan input dengan tidak ada tampilan.

Ini berfungsi dengan baik pada cordova dengan iOS

<link href="https://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css" rel="stylesheet"/>
<label for="imageUpload" class="btn btn-primary btn-block btn-outlined">Seleccionar imagenes</label>
<input type="file" id="imageUpload" accept="image/*" style="display: none">
Luaskan cuplikan

— Paulo Mogollón
sumber
1
solusi terbaik yang saya temukan sejauh ini! +1
— danyo
7

Ini tidak mungkin. Kalau tidak, Anda mungkin perlu menggunakan kontrol unggahan Silverlight atau Flash.

— Anuraj
sumber
1
Yang mana tidak mungkin? Mengubah teks atau menempatkan tombol di kanan atau keduanya?
— Harry Joy
13
Saya membatalkan ini, karena saya pikir tidak adil untuk menurunkan jawaban ini. Pada dasarnya tidak mungkin untuk mengubah teks dari tombol input file asli. "Solusi yang mungkin" adalah semua peretasan atau penyelesaian masalah.
— Peter Lee
10
@PeterLee - Hacks adalah solusi, beberapa bahkan mengikuti spesifikasi W3C.
— Derek 朕 會 功夫
3

Di sini bagaimana Anda dapat melakukannya:

jQuery: 

$(function() {
  $("#labelfile").click(function() {
    $("#imageupl").trigger('click');
  });
})

css

.file {
  position: absolute;
  clip: rect(0px, 0px, 0px, 0px);
  display: block;
}
.labelfile {
  color: #333;
  background-color: #fff;
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  white-space: nowrap;
  padding: 6px 8px;
  font-size: 14px;
  line-height: 1.42857143;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Kode HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="margin-top:4px;">
  <input name="imageupl" type="file" id="imageupl" class="file" />
  <label class="labelfile" id="labelfile"><i class="icon-download-alt"></i> Browse File</label>
</div>
— Tushar Shukla
sumber
3 
<button class="styleClass" onclick="document.getElementById('getFile').click()">Your text here</button>
<input type='file' id="getFile" style="display:none">

Ini masih yang terbaik sejauh ini

— oroyo segun
sumber
2

Menggunakan Bootstrap Anda dapat melakukan hal ini seperti kode di bawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
<style>

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}
</style>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <span class="btn btn-file">Upload image from here<input type="file">
</body>
</html>
— Rana Aalamgeer
sumber
Kode ini tidak mencetak kembali ke halaman web file apa yang dipilih.
— tale852150
2

Saya membuat skrip dan menerbitkannya di GitHub: dapatkan selectFile.js Mudah digunakan, jangan ragu untuk mengkloning.


HTML

<input type=file hidden id=choose name=choose>
<input type=button onClick=getFile.simulate() value=getFile>
<label id=selected>Nothing selected</label>


JS

var getFile = new selectFile;
getFile.targets('choose','selected');


DEMO

jsfiddle.net/Thielicious/4oxmsy49/

— Sangat berbahaya
sumber
2

Pembaruan 2017:

Saya telah melakukan penelitian tentang bagaimana ini bisa dicapai. Dan penjelasan / tutorial terbaik ada di sini: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

Saya akan menulis ringkasan di sini kalau-kalau itu tidak tersedia. Jadi, Anda harus memiliki HTML:

<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>

Kemudian sembunyikan input dengan CSS:

.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;}

Kemudian beri label gaya:

.inputfile + label {
font-size: 1.25em;
font-weight: 700;
color: white;
background-color: black;
display: inline-block;
}

Kemudian secara opsional Anda dapat menambahkan JS untuk menampilkan nama file:

var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
{
var label    = input.nextElementSibling,
    labelVal = label.innerHTML;

input.addEventListener( 'change', function( e )
{
    var fileName = '';
    if( this.files && this.files.length > 1 )
        fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
    else
        fileName = e.target.value.split( '\\' ).pop();

    if( fileName )
        label.querySelector( 'span' ).innerHTML = fileName;
    else
        label.innerHTML = labelVal;
});
});

Tetapi benar-benar hanya membaca tutorial dan mengunduh demo, itu sangat bagus.

— pengguna3784950
sumber
1

Saya akan menggunakan buttonuntuk memicu input:

<button onclick="document.getElementById('fileUpload').click()">Open from File...</button>
<input type="file" id="fileUpload" name="files" style="display:none" />

Cepat dan bersih.

— Sony Santos
sumber
1

Anda dapat menggunakan pendekatan ini, itu berfungsi bahkan jika banyak input file.

const fileBlocks = document.querySelectorAll('.file-block')
const buttons = document.querySelectorAll('.btn-select-file')

;[...buttons].forEach(function (btn) {
  btn.onclick = function () {
    btn.parentElement.querySelector('input[type="file"]').click()
  }
})

;[...fileBlocks].forEach(function (block) {
  block.querySelector('input[type="file"]').onchange = function () {
    const filename = this.files[0].name

    block.querySelector('.btn-select-file').textContent = 'File selected: ' + filename
  }
})
.btn-select-file {
  border-radius: 20px;
}

input[type="file"] {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="file-block">
  <button class="btn-select-file">Select Image 1</button>
  <input type="file">
</div>
<br>
<div class="file-block">
  <button class="btn-select-file">Select Image 2</button>
  <input type="file">
</div>
Luaskan cuplikan

— Илья Зеленько
sumber
Saya suka pendekatan ini, tetapi bagi saya Teks File yang dipilih tidak muncul, tahu apa masalahnya. Saya google chrome
— N Khan
1

Ini seharusnya bekerja:

input.*className*::-webkit-file-upload-button {
  *style content..*
}
— Andrius
sumber
1

Ini adalah bagaimana ini dilakukan dengan bootstrap, hanya kamu yang harus meletakkan input asli di suatu tempat ... idk di kepala dan hapus <br> jika kamu memilikinya, karena itu hanya tersembunyi dan mengambil ruang pula :)

 <head> 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 </head>
 
 <label for="file" button type="file" name="image" class="btn btn-secondary">Secondary</button> </label>
    
 <input type="file" id="file" name="image" value="Prebrskaj" style="visibility:hidden;">
 
 
 <footer>
 
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 
 </footer>
Luaskan cuplikan

— Leon Tanko
sumber
0

Biarkan saya menambahkan retasan yang saya gunakan. Saya ingin memiliki bagian yang memungkinkan Anda untuk menarik dan melepas file, dan saya ingin bagian tarik dan lepas itu dapat diklik bersama dengan tombol unggah yang asli.

Ini adalah bagaimana kelihatannya ketika saya selesai (dikurangi kemampuan drag and drop, ada banyak tutorial tentang cara melakukannya).

Dan kemudian saya benar-benar membuat serangkaian posting blog yang terutama tentang tombol unggah file.

— wp-overwatch.com
sumber
0

Ok jadi cara css murni sangat sederhana untuk membuat file input kustom Anda.

Gunakan label, tetapi seperti yang Anda tahu dari jawaban sebelumnya, label tidak memanggil fungsi onclick di firefox, mungkin bug tetapi tidak masalah dengan yang berikut ini.

<label for="file"  class="custom-file-input"><input type="file"  name="file" class="custom-file-input"></input></label>

Apa yang Anda lakukan adalah menata label untuk melihat seperti yang Anda inginkan

    .custom-file-input {
        color: transparent;/* This is to take away the browser text for file uploading*/
        /* Carry on with the style you want */
        background: url(../img/doc-o.png);
        background-size: 100%;
        position: absolute;
        width: 200px;
        height: 200px;
        cursor: pointer;
        top: 10%;
        right: 15%;
    }

sekarang cukup sembunyikan tombol input yang sebenarnya, tetapi Anda tidak dapat mengaturnya visability: hidden

Jadi buat tidak terlihat dengan pengaturan opacity: 0;

input.custom-file-input {
    opacity: 0;
    position: absolute;/*set position to be exactly over your input*/
    left: 0;
    top: 0;
}

sekarang karena Anda mungkin telah memperhatikan saya memiliki kelas yang sama pada label saya seperti yang saya lakukan bidang input saya, itu karena saya ingin keduanya memiliki gaya yang sama, jadi di mana pun Anda mengklik label, Anda sebenarnya mengklik yang tidak terlihat bidang input.

— Jadin Hornsby
sumber
0

Solusi saya ...

HTML:

<input type="file" id="uploadImages" style="display:none;" multiple>

<input type="button" id="callUploadImages" value="Select">
<input type="button" id="uploadImagesInfo" value="0 file(s)." disabled>
<input type="button" id="uploadProductImages" value="Upload">

Jquery:

$('#callUploadImages').click(function(){

    $('#uploadImages').click();
});

$('#uploadImages').change(function(){

    var uploadImages = $(this);
    $('#uploadImagesInfo').val(uploadImages[0].files.length+" file(s).");
});

Ini jahat: D

— bagatov88
sumber
0 

$(document).ready(function () {
	$('#choose-file').change(function () {
		var i = $(this).prev('label').clone();
		var file = $('#choose-file')[0].files[0].name;
		$(this).prev('label').text(file);
	}); 
 });
.custom-file-upload{
  background: #f7f7f7; 
  padding: 8px;
  border: 1px solid #e3e3e3; 
  border-radius: 5px; 
  border: 1px solid #ccc; 
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
can you try this

<label for="choose-file" class="custom-file-upload" id="choose-file-label">
   Upload Document
</label>
<input name="uploadDocument" type="file" id="choose-file" 
   accept=".jpg,.jpeg,.pdf,doc,docx,application/msword,.png" style="display: none;" />
Luaskan cuplikan

— Rokive
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.