= "Dosya" girdi tipindeki varsayılan metin değiştirilsin mi?

183

Kullandığımız Choose Filezaman " " düğmesindeki varsayılan metni değiştirmek istiyorum input="file".

resim açıklamasını buraya girin

Bunu nasıl yapabilirim? Ayrıca resimde gördüğünüz gibi düğme metnin sol tarafındadır. Metnin sağ tarafına nasıl koyabilirim?

html  file  input  default-value 
— Harry Joy
kaynak
Bu metni değişkene alma seçeneği var mı?
— kicaj
1
ParPar tarafından cevap burada muhtemelen aradığınız şeydir: stackoverflow.com/questions/1944267/… .
— Aniket Suryavanshi
— Ciro Santilli 法轮功 冠状 病 六四 事件 法轮功
Bu çözümü deneyin: stackoverflow.com/a/30275263/1657573
— Michael Tarimo
— Bae

Yanıtlar:

49

Her tarayıcının kendi denetim denetimi vardır ve bu nedenle denetimin metnini veya yönünü değiştiremezsiniz.

İsterseniz denemek isteyebileceğiniz bazı "tür" kesmek vardır html/css Flash yerine çözüm veya silverlightçözüm.

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

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

Şahsen, çoğu kullanıcı kendi tarayıcılarına sadık kaldığından ve muhtemelen kontrolü varsayılan yorumlamada görmeye alışık olduğundan, muhtemelen farklı bir şey gördüklerinde (uğraştığınız kullanıcı türlerine bağlı olarak) kafaları karışır. .

— Shiv Kumar
kaynak
177

Kullanım "for"öznitelik labeliçin input.

<div>
  <label for="files" class="btn">Select Image</label>
  <input id="files" style="visibility:hidden;" type="file">
</div>
Yüklenen dosyanın adını getirecek kod aşağıdadır 

$("#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>
Snippet'i genişlet

— algometrix
kaynak
20
display:noneINPUT üzerinde kullanılabilir, böylece gerekli alan kullanılmaz.
— Master DJon
2
Teşekkür ederim. Bu mükemmel çalıştı ve tam olarak aradığım şeydi.
— Chris - Jr
Chrome, FF ve Safari ile Mac'te sorunsuz çalışır. IE üzerinde de yaparsa, bu dosya giriş düğmesine stil için en iyi ve en basit seçenektir. Teşekkürler!
— Pod
5
iyi çalışıyor, sadece hafif negatif, kullanıcının seçimde seçilen dosyanın adını görememesi.
— luke_mclachlan
2
@Mike Dosya
— adını
29

Bence istediğin bu:

<!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>
Snippet'i genişlet

— 1Cr18Ni9
kaynak
27

Bu, gelecekte birisine yardımcı olabilir, girişin etiketini istediğiniz gibi şekillendirebilir ve içine istediğiniz herhangi bir şeyi koyabilir ve girdiyi ekran yokken gizleyebilirsiniz.

İOS ile cordova üzerinde mükemmel çalışır

<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">
Snippet'i genişlet

— Paulo Mogollón
kaynak
1
şimdiye kadar bulduğum en iyi çözüm! +1
— danyo
7

Mümkün değil. Aksi takdirde Silverlight veya Flash yükleme kontrolünü kullanmanız gerekebilir.

— Anuraj
kaynak
1
Hangisi mümkün değil? Metni değiştirmek veya düğmeyi sağa mı yoksa ikisine birden yerleştirmek mi?
— Harry Joy
13
Bunu iptal ettim, çünkü bence bu cevabı küçümsemek haksızlık. Yerel dosya giriş düğmesinin metnini değiştirmek temel olarak imkansızdır. "Olası çözümler", tümü saldırı veya geçici çözümlerdir.
— Peter Lee
10
@PeterLee - Hacks olan hatta bazıları W3C spesifikasyonlarına uygundur çözümleri.
— Derek 朕 會 功夫
3

İşte nasıl yapabilirsiniz:

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

HTML Kodu:

<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
kaynak
3 
<button class="styleClass" onclick="document.getElementById('getFile').click()">Your text here</button>
<input type='file' id="getFile" style="display:none">

Bu hala en iyisi

— oroyo segun
kaynak
2

Bootstrap kullanarak bu kodu aşağıdaki gibi yapabilirsiniz.

<!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 Alamer
kaynak
Bu kod, hangi dosyanın seçildiğini web sayfasına yazdırmaz.
— tale852150
2

Bir senaryo hazırladım ve GitHub'da yayınladım: select selectFile.js Kullanımı kolay, klonlamaktan çekinmeyin.


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/

— Thielicious
kaynak
2

Güncelleme 2017:

Bunun nasıl başarılabileceğine dair araştırmalar yaptım. Ve en iyi açıklama / öğretici burada: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

Buraya ulaşılamaması durumunda özet yazacağım. Bu yüzden HTML'niz olmalıdır:

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

Ardından girişi CSS ile gizleyin:

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

Ardından etiketi biçimlendirin:

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

Daha sonra isteğe bağlı olarak dosyanın adını görüntülemek için JS ekleyebilirsiniz:

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

Ama gerçekten sadece öğretici okumak ve demo indirmek, gerçekten iyi.

— user3784950
kaynak
1

Ben buttontetiklemek için kullanın input:

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

Hızlı ve temiz.

— Sony Santos
kaynak
1

Bu yaklaşımı kullanabilirsiniz, çok sayıda dosya girişi olsa bile çalışır.

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>
Snippet'i genişlet

— Илья Зеленько
kaynak
Bu yaklaşımı beğendim, ancak benim için Seçilen Dosya metni görünmüyor, sorunun ne olduğu hakkında herhangi bir fikir. Google Chrome'um
— N Khan
1

Bu çalışmalı:

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

İşte onun bootstrap ile nasıl yapılır, sadece u bir yere orijinal giriş koymak gerekir ... kafasına idk ve eğer varsa, sadece br ve onun alan alarak zaten br <) silin

 <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>
Snippet'i genişlet

— Leon Tanko
kaynak
0

Kullandığım bir kesmek ekleyeyim. Dosyaları sürükleyip bırakmanıza izin veren bir bölümüm olmasını istedim ve bu sürükleyip bırakma bölümünün orijinal yükleme düğmesiyle birlikte tıklanabilir olmasını istedim.

İşte bittiğimde nasıl göründüğü (sürükle bırak yeteneği eksi, bunun nasıl yapılacağı konusunda birçok öğretici var).

Ve sonra esasen dosya yükleme düğmeleriyle ilgili bir dizi blog yazısı oluşturdum .

— wp-overwatch.com
kaynak
0

Özel giriş dosyanızı oluşturmanın çok basit saf css yolu Tamam.

Etiketleri kullanın, ancak önceki yanıtlardan bildiğiniz gibi, etiket firefox'ta onclick işlevini çağırmaz, bir hata olabilir, ancak aşağıdakilerle önemli değildir.

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

Yaptığınız şey, etiketi istediğiniz gibi görünmesi için biçimlendirmektir

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

şimdi sadece gerçek giriş düğmesini gizleyin, ancak visability: hidden

Yani ayarlayarak görünmez olun opacity: 0;

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

şimdi fark etmiş olabilirsiniz gibi benim giriş alanında yaptığım gibi benim etiket üzerinde aynı sınıf var, çünkü ben her ikisi de aynı stile sahip olmasını istiyorum, böylece etiketi her tıkladığınızda, aslında görünmez tıklayın giriş alanı.

— Jadin Hornsby
kaynak
0

Çözümüm...

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).");
});

Bu sadece kötülük: D

— bagatov88
kaynak
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;" />
Snippet'i genişlet

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