จะเปลี่ยนข้อความปุ่มของ <input type =“ file” /> ได้อย่างไร?

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

ฉันพยายามแก้ไขvalueแต่มันไม่ทำงาน วิธีปรับแต่งข้อความของปุ่ม?

ใช้Bootstrap FileStyleซึ่งใช้เพื่อจัดรูปแบบฟิลด์ไฟล์ของแบบฟอร์ม มันเป็นปลั๊กอินสำหรับไลบรารีส่วนประกอบ jQuery ที่เรียกว่า Twitter Bootstrap

ตัวอย่างการใช้งาน:

รวมถึง:

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

ผ่าน JavaScript:

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

ผ่านแอตทริบิวต์ข้อมูล:

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

คุณสามารถใส่ภาพแทนและทำเช่นนี้:

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

ถ้ำ : ใน IE9 และ IE10 หากคุณเปิดใช้ onClick ในไฟล์ที่ป้อนผ่านจาวาสคริปต์รูปแบบจะถูกตั้งค่าสถานะเป็น 'อันตราย' และไม่สามารถส่งด้วยจาวาสคริปต์ไม่แน่ใจว่าสามารถส่งแบบดั้งเดิมได้หรือไม่

ซ่อนอินพุตไฟล์ สร้างอินพุตใหม่เพื่อจับภาพเหตุการณ์การคลิกและส่งต่อไปยังอินพุตที่ซ่อนอยู่:

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

ข้อความ "อัปโหลดไฟล์ ... " ถูกกำหนดไว้ล่วงหน้าโดยเบราว์เซอร์และไม่สามารถเปลี่ยนแปลงได้ วิธีเดียวที่จะได้รับรอบนี้คือการใช้องค์ประกอบที่อัปโหลด Flash- หรือ Java-based เช่นswfupload

ทำงานได้อย่างสมบูรณ์บนเบราว์เซอร์ทั้งหมดหวังว่ามันจะทำงานให้คุณเช่นกัน

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

เปลี่ยนcontent: 'Select some files';ด้วยข้อความที่คุณต้องการภายใน''

หากไม่ได้ทำงานกับ firefox ให้ใช้สิ่งนี้แทนอินพุต:

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

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

นี่คือปลั๊กอิน JQuery เพื่อเปลี่ยนข้อความปุ่มขององค์ประกอบไฟล์อินพุต

ตัวอย่าง HTML:

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

ตัวอย่าง JS:

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

ผลลัพธ์:

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

http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/เพิ่มเติม

ง่ายดาย

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

[แก้ไขด้วยตัวอย่าง]

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

ฉันคิดว่านี่คือสิ่งที่คุณต้องการ:

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

แก้ไข : ฉันเห็นตอนนี้โดยความคิดเห็นที่คุณถามเกี่ยวกับข้อความปุ่มไม่ใช่เส้นทางไฟล์ ความผิดฉันเอง. ฉันจะทิ้งคำตอบดั้งเดิมไว้ด้านล่างในกรณีที่คนอื่นสะดุดคำถามนี้ตีความในแบบที่ฉันเคยทำ

แก้ไขครั้งที่ 2 : ฉันได้ลบคำตอบนี้เพราะฉันตัดสินใจว่าฉันเข้าใจผิดคำถามและคำตอบของฉันไม่เกี่ยวข้อง อย่างไรก็ตามความคิดเห็นในคำตอบอื่นบ่งชี้ว่าผู้คนยังต้องการเห็นคำตอบนี้ดังนั้นฉันจึงยกเลิกการลบ

คำตอบเดิมของฉัน (ฉันคิดว่า OP ได้ขอเกี่ยวกับเส้นทางไม่ใช่ข้อความของปุ่ม):

นี้ไม่ได้เป็นคุณลักษณะที่สนับสนุนสำหรับเหตุผลด้านความปลอดภัย เว็บเบราว์เซอร์ Opera ใช้เพื่อรองรับสิ่งนี้ แต่ถูกลบไปแล้ว ลองนึกถึงสิ่งที่จะเป็นไปได้ถ้าสิ่งนี้ได้รับการสนับสนุน คุณสามารถสร้างเพจที่มีอินพุตการอัพโหลดไฟล์ใส่ข้อมูลล่วงหน้าด้วยพา ธ ไปยังไฟล์ที่มีความละเอียดอ่อนจากนั้นส่งแบบฟอร์มโดยอัตโนมัติโดยใช้จาวาสคริปต์ที่ทริกเกอร์โดยonloadเหตุการณ์ สิ่งนี้จะเกิดขึ้นเร็วเกินไปสำหรับผู้ใช้ที่จะทำอะไรกับมัน

ใช้<label>สำหรับคำบรรยายภาพ

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

นี้ทำงานได้โดยไม่ต้องจาวาสคริปต์ใด ๆ คุณสามารถตกแต่งฉลากให้มีความซับซ้อนได้ตามความต้องการของคุณ เมื่อคุณคลิกที่ป้ายกำกับการคลิกจะถูกเปลี่ยนเส้นทางไปยังอินพุตไฟล์โดยอัตโนมัติ อินพุตไฟล์นั้นสามารถทำให้มองไม่เห็นด้วยวิธีใด ๆ หากคุณต้องการให้ป้ายข้อความดูเหมือนปุ่มมีวิธีแก้ปัญหามากมายเช่น:

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

    text-decoration: none;
    color: initial;
}

เฉพาะ CSS & bootstrap class

        <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. ก่อนหน้านั้น<input type="file">เพิ่มภาพและ<input style="position:absolute">มันจะใช้พื้นที่ของ<input type="file">

2. ใช้ CSS ต่อไปนี้เพื่อองค์ประกอบไฟล์

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

หากคุณใช้รางและมีปัญหาใช้ฉันต้องการที่จะเพิ่มเคล็ดลับจากคำตอบเดิมที่โพสต์โดย @Fernando Kosh

• ดาวน์โหลดไฟล์zipและคัดลอกไฟล์ bootstrap-filestyle.min.js แอพโฟลเดอร์ / สินทรัพย์ / javascripts /

• เปิด application.js ของคุณและเพิ่มบรรทัดนี้ด้านล่าง

  // = ต้องการ bootstrap-filestyle.min

• เปิดกาแฟของคุณและเพิ่มบรรทัดนี้

  $ (": file"). filestyle ({buttonName: "btn-primary", buttonBefore: true, buttonText: "ข้อความของคุณที่นี่", ไอคอน: false});

คุณสามารถเพิ่มเคล็ดลับ css คุณไม่จำเป็นต้องจาวาสคริปต์หรือการป้อนข้อมูลไฟล์และฉันให้แอตทริบิวต์ค่าที่มีอยู่ คุณจำเป็นต้องเพิ่มเพียง CSS คุณสามารถลองวิธีนี้

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

ต่อไปนี้เป็นวิธี "เปลี่ยน" ข้อความของอินพุตที่มีประเภทไฟล์พร้อม HTML และจาวาสคริปต์ที่บริสุทธิ์:

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

สำหรับฉันมันไม่ทำงานข้อความที่กำหนดเองกับบูต-filestyle มันช่วยในการตกแต่งปุ่ม แต่ส่งข้อความแปลก ๆ ที่จะเปลี่ยนก่อนเข้าต่อสู้กับ css ฉันลองต่อไปนี้:

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

bootstrap-filestyle แสดงส่วนประกอบเป็นขยายด้วยคลาสชื่อ butonText ดังนั้นเมื่อโหลดเอกสารเพียงแค่เปลี่ยนข้อความ ถูกต้องง่ายและจะต้องทำงานกับเบราว์เซอร์ทั้งหมด

ไชโย

ฉันทำแบบนี้กับโครงการของฉัน:

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

นี่เป็นทางเลือกอื่นที่อาจเป็นประโยชน์สำหรับคุณ นี่จะซ่อนข้อความที่ปรากฏขึ้นจากปุ่มผสมกับสีพื้นหลังของ div จากนั้นคุณสามารถให้ div ชื่อที่คุณชอบ

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