Bagaimana cara mengubah teks tombol <input type = "file" />?

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

Saya mencoba untuk memodifikasi value, tetapi tidak berfungsi. Bagaimana cara menyesuaikan teks tombol?

Gunakan Bootstrap FileStyle , yang digunakan untuk menata bidang file formulir. Ini adalah plugin untuk pustaka komponen berbasis jQuery yang disebut Twitter Bootstrap

Penggunaan sampel:

Termasuk:

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

Melalui JavaScript:

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

Melalui atribut data:

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

Anda dapat menempatkan gambar sebagai gantinya, dan melakukannya seperti ini:

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 : Di IE9 dan IE10 jika Anda memicu onClick dalam input file melalui javascript, formulir akan ditandai sebagai 'berbahaya' dan tidak dapat dikirimkan dengan javascript, tidak yakin apakah itu dapat dikirimkan secara tradisional.

Sembunyikan input file. Buat input baru untuk menangkap acara klik dan meneruskannya ke input tersembunyi:

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

Teks "unggah file ..." sudah ditentukan sebelumnya oleh browser dan tidak dapat diubah. Satu-satunya cara untuk mengatasi ini adalah dengan menggunakan komponen unggahan berbasis Flash atau Java seperti swfupload .

Berfungsi Sempurna di Semua Peramban. Berharap itu juga akan berhasil untuk Anda.

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

Ubah content: 'Select some files';dengan teks yang Anda inginkan di dalamnya''

JIKA TIDAK BEKERJA dengan firefox maka gunakan ini sebagai ganti input:

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

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

Ini adalah plugin JQuery untuk mengubah teks tombol elemen file input.

Contoh HTML:

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

Contoh JS:

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

Hasil:

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

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

Secara sederhana

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

[Sunting dengan cuplikan]

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

Saya pikir ini yang Anda inginkan:

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

EDIT : Saya melihat sekarang dengan komentar yang Anda tanyakan tentang teks tombol, dan bukan path file. Salahku. Saya akan meninggalkan jawaban asli saya di bawah untuk berjaga-jaga jika ada orang lain yang menemukan pertanyaan ini menafsirkannya seperti yang saya lakukan sebelumnya.

EDIT ke-2 : Saya telah menghapus jawaban ini karena saya memutuskan bahwa saya salah memahami pertanyaan dan jawaban saya tidak relevan. Namun, komentar dalam jawaban lain menunjukkan bahwa orang masih ingin melihat jawaban ini, jadi saya membatalkan penghapusan.

JAWABAN ASLI SAYA (Saya pikir OP bertanya tentang jalan, bukan teks tombol):

Ini bukan fitur yang didukung untuk alasan keamanan . Browser web Opera digunakan untuk mendukung ini tetapi telah dihapus. Pikirkan tentang apa yang mungkin terjadi jika ini didukung; Anda dapat membuat halaman dengan input unggah file, mengisinya terlebih dahulu dengan path ke beberapa file sensitif dan kemudian secara otomatis mengirimkan formulir menggunakan javascript yang dipicu oleh onloadacara tersebut. Ini akan terjadi terlalu cepat bagi pengguna untuk melakukan apa pun.

Gunakan <label>untuk keterangan

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

Ini berfungsi tanpa javascript . Anda dapat menghiasi label dengan tingkat kerumitan apa pun, sesuka hati Anda. Ketika Anda mengklik label, klik itu secara otomatis dialihkan ke input file. Input file itu sendiri dapat dibuat tidak terlihat oleh metode apa pun. Jika Anda ingin label muncul seperti tombol, ada banyak solusi, misalnya:

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

    text-decoration: none;
    color: initial;
}

Hanya kelas CSS & bootstrap

        <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. Sebelum itu <input type="file">, tambahkan gambar dan <input style="position:absolute">itu akan menempati ruang<input type="file">

2. Gunakan CSS berikut untuk elemen file

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

jika Anda menggunakan rel dan memiliki masalah menerapkannya, saya ingin menambahkan beberapa tips dari jawaban asli yang diposting oleh @Fernando Kosh

• Unduh file zip dan salin file folder aplikasi bootstrap-filestyle.min.js / aset / javascripts /

• buka application.js Anda dan tambahkan baris ini di bawah ini

  // = membutuhkan bootstrap-filestyle.min

• buka kopi Anda dan tambahkan baris ini

  $ (": file"). filestyle ({buttonName: "btn-primary", buttonBefore: true, buttonText: "Teks Anda di sini", ikon: false});

Anda cukup menambahkan beberapa trik css. Anda tidak perlu javascript atau lebih banyak file input dan saya menyimpan atribut nilai yang ada . Anda hanya perlu menambahkan css . Anda dapat mencoba solusi ini.

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

Berikut adalah cara untuk "mengubah" teks input dengan tipe file, dengan HTML dan javascript murni:

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

bagi saya itu tidak berfungsi teks kustom dengan bootstrap-filestyle . Ini membantu dengan hiasan tombol tapi teksnya aneh untuk diubah, sebelum mulai bergulat dengan css saya coba yang berikut ini:

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

bootstrap-filestyle membuat komponen sebagai rentang dengan kelas bernama butonText, jadi ketika memuat dokumen hanya mengubah teks. benar mudah dan itu harus bekerja di semua browser.

Bersulang

Saya melakukannya seperti ini untuk proyek saya:

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

Ini adalah solusi alternatif yang mungkin bisa membantu Anda. Ini menyembunyikan teks yang muncul dari tombol, mencampurnya dengan warna latar belakang div. Maka Anda dapat memberikan div judul yang Anda suka.

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