<İnput type = “file” /> düğme metnini nasıl değiştirebilirim?

<input type="file" value="Browse" name="avatar" id="id_avatar" />

Değiştirmeye çalıştım value, ama çalışmıyor. Düğme metni nasıl özelleştirilir?

Formların dosya alanlarını biçimlendirmek için kullanılan Bootstrap FileStyle öğesini kullanın . Twitter Bootstrap adlı jQuery tabanlı bileşen kütüphanesi için bir eklentidir

Örnek kullanım:

Dahil etmek:

<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>

JavaScript ile:

$(":file").filestyle();

Veri özellikleri üzerinden:

<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false" data-classIcon="icon-plus" data-buttonText="Your label here.">

Bunun yerine bir görüntü koyabilir ve şöyle yapabilirsiniz:

HTML:

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

JQuery:

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});

CAVEAT : IE9 ve IE10'da, onClick'i javascript yoluyla bir dosya girişinde tetiklerseniz, form 'tehlikeli' olarak işaretlenir ve javascript ile gönderilemez, geleneksel olarak gönderilip gönderilemeyeceğinden emin olamaz.

Dosya girişini gizleyin. Bir tıklama etkinliğini yakalamak için yeni bir giriş oluşturun ve bunu gizli girdiye iletin:

<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>

"Dosya yükle ..." metni tarayıcı tarafından önceden tanımlanmıştır ve değiştirilemez. Bu sorunu aşmanın tek yolu swfupload gibi Flash veya Java tabanlı bir yükleme bileşeni kullanmaktır .

Tüm Tarayıcılarda Mükemmel Çalışır Umarım sizin için de çalışır.

HTML:
<input type="file" class="custom-file-input">

CSS:

 .custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Select some files';
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

İçinde content: 'Select some files';olmasını istediğiniz metinle değiştirin''

Firefox ile ÇALIŞMIYORSA giriş yerine bunu kullanın:

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

<input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">

Bu , bir giriş dosyası öğesinin düğme metnini değiştirmek için kullanılan bir JQuery eklentisidir.

Örnek HTML:

<input type="file" id="choose-file" />

Örnek JS:

$('#choose-file').inputFileText({
    text: 'Select File'
});

Sonuç:

<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload btn btn-primary">
    <span>Your name</span>
    <input id="uploadBtn" type="file" class="upload" />
</div>

JS

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
 };

daha fazla http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

basitçe

<label class="btn btn-primary">
  <i class="fa fa-image"></i> Your text here<input type="file" style="display: none;"  name="image">
</label>

[Snippet ile düzenle]

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<label class="btn btn-primary">
<i class="fa fa-image"></i> Your text here<input type="file" style="display: none;" name="image">
</label>

Bence istediğin bu:

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

DÜZENLEME : Şimdi düğme yolu hakkında sorduğunuz yorumlar tarafından görüyorum, dosya yolu değil. Benim hatam. Bu soru üzerine tökezleyen başka birinin bunu ilk yaptığım şekilde yorumlaması durumunda asıl cevabımı aşağıda bırakacağım.

2. DÜZENLEME : Bu yanıtı sildim çünkü soruyu yanlış anladığımı ve cevabımın alakalı olmadığını düşündüm. Bununla birlikte, başka bir yanıttaki yorumlar, insanların hala bu cevabı görmek istediğini ve bu yüzden silme işlemini geri aldığımı gösterdi.

ORİJİNAL CEVAPIM (OP'nin düğme metni değil, yolu sorduğunu düşündüm):

Bu, güvenlik nedeniyle desteklenen bir özellik değildir . Opera web tarayıcısı bunu desteklemek için kullanıldı, ancak kaldırıldı. Bu desteklenirse nelerin mümkün olabileceğini düşünün; Dosya yükleme girişine sahip bir sayfa oluşturabilir, bazı hassas dosyaların yolunu önceden doldurabilir ve ardından onloadolay tarafından tetiklenen javascript'i kullanarak formu otomatik olarak gönderebilirsiniz . Bu, kullanıcının bu konuda herhangi bir şey yapması için çok hızlı olur.

<label>Resim yazısı için kullanın

<form enctype='multipart/form-data' action='/uploads.php' method=post>
<label for=b1>
    <u>Your</u> caption here
<input style='width:0px' type=file name=upfile id=b1
 onchange='optionalExtraProcessing(b1.files[0])'
 accept='image/png'>
</label>
</form>

Bu herhangi bir javascript olmadan çalışır . Etiketi herhangi bir karmaşıklık derecesine, kalbinizin içeriğine göre dekore edebilirsiniz. Etiketi tıklattığınızda, tıklama otomatik olarak dosya girişine yönlendirilir. Dosya girdisinin kendisi herhangi bir yöntemle görünmez hale getirilebilir. Etiketin bir düğme gibi görünmesini istiyorsanız, birçok çözüm vardır, örneğin:

label u {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

Yalnızca CSS ve bootstrap sınıfı

        <div class="col-md-4 input-group">
            <input class="form-control" type="text"/>
            <div class="input-group-btn">
                <label for="files" class="btn btn-default">browse</label>
                <input id="files" type="file" class="btn btn-default"  style="visibility:hidden;"/>
            </div>
        </div>

1. Bundan önce <input type="file">, bir görüntü eklemek ve <input style="position:absolute">bunu alanını işgal edecek<input type="file">

2. Dosya öğesine aşağıdaki CSS'yi kullanın

   position:relative;  
   opacity:0;  
   z-index:99;

raylar kullanıyorsanız ve uygulamakta sorun yaşıyorsanız, @Fernando Kosh tarafından gönderilen orijinal yanıttan bazı ipuçları eklemek istiyorum

• Dosya zip dosyasını indirin ve dosya bootstrap-filestyle.min.js ke klasör uygulaması / asset / javascripts /

• application.js dosyanızı açın ve bu satırı aşağıya ekleyin

  // = bootstrap-filestyle.min gerektirir

• kahvenizi açın ve bu satırı ekleyin

  $ (": file"). filestyle ({buttonName: "btn-birincil", buttonBefore: true, buttonText: "Metniniz buraya", simge: false});

Sadece biraz css hilesi ekleyebilirsiniz. Eğer javascript gerekmez veya daha fazla giriş dosya ve i tutmak mevcut değer niteliğini . sadece css eklemeniz gerekir . bu çözümü deneyebilirsiniz.

.btn-file-upload{
     width: 187px;
     position:relative;
 }

.btn-file-upload:after{
    content:  attr(value);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;    
    width: 48%;
    background: #795548;
    color: white;
    border-radius: 2px;
    text-align: center;
    font-size: 12px;
    line-height: 2;
 }

<input type="file" class="btn-file-upload" value="Uploadfile" />

Aşağıda, dosya türündeki bir girdinin metnini saf HTML ve javascript ile "değiştirmenin" bir yolu vardır:

<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
    *The text you want*
</button>

benim için özel metin bootstrap-filestyle ile çalışmıyor . Düğme dekorasyonu ile yardımcı olur, ancak metni değiştirmek için garip, css ile güreşmeden önce aşağıdakileri deneyin:

$( document ).ready(function() {
   $('.buttonText').html('Seleccione ficheros');
});

bootstrap-filestyle, bileşeni düğmeText adlı bir sınıfla yayılma alanı olarak oluşturur; bu nedenle belge yüklendiğinde metni değiştirin. kolay doğru ve tüm tarayıcılarda çalışması gerekir.

şerefe

Projem için böyle yaptım:

.btn-outlined.btn-primary {
  color: #000;
}
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
  color:#000;
}
.btn-block {
  display: block;
  width: 100%;
  padding: 15px 0;
  margin-bottom: 10px;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

<label for="fileUpload" class="btn btn-primary btn-block btn-outlined">Your text</label>
<input type="file" id="fileUpload"style="display: none;">

Bu, size yardımcı olabilecek alternatif bir çözümdür. Bu, düğmenin dışında görünen metni, div'ın arka plan rengiyle karıştırarak gizler. Ardından div'e istediğiniz başlığı verebilirsiniz.

<div style="padding:10px;font-weight:bolder; background-color:#446655;color: white;margin-top:10px;width:112px;overflow: hidden;">
     UPLOAD IMAGE <input style="width:100px;color:#446655;display: inline;" type="file"  />
</div>