เปลี่ยน "ไม่ได้เลือกไฟล์":


92

ฉันมีปุ่ม "เลือกไฟล์" ดังนี้ (ฉันใช้ Jade แต่ควรจะเหมือนกับ Html5):

 input(type='file', name='videoFile')

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

ฉันไม่ต้องการเห็น 'ไม่ได้เลือกไฟล์' สำหรับช่องป้อนไฟล์

แต่การทำเช่นนี้ไม่ได้เปลี่ยนข้อความ:

 input(type='file', name='videoFile', title = "Choose a video please")

ใครช่วยฉันได้ไหมว่าปัญหาอยู่ที่ไหน


หาคำตอบได้ที่นี่ stackoverflow.com/questions/12035400/…
Mahmoud Farahat

1
@MahmoudFarahat ฉันไม่ต้องการลบออกฉันต้องการเปลี่ยนข้อความ
FranXh

คุณไม่สามารถลบข้อความและวางป้ายกำกับไว้ข้างๆได้หรือไม่?
Roger Lipscombe

มีคำตอบที่เป็นระเบียบเรียบร้อยสำหรับเรื่องนี้ในโพสต์อื่น stackoverflow.com/a/21842275/3653494
P-Bagels

เป็นไปได้มาก: ลองดูวิธีแก้ปัญหาด่วนนี้ - รวมสิ่งอื่น ๆ เพียงเลื่อนไปที่ด้านล่างของ CSS: w3schools.com/code/tryit.asp?filename=FWBJX00JSQD7
darga33

คำตอบ:


18

ฉันค่อนข้างแน่ใจว่าคุณไม่สามารถเปลี่ยนป้ายกำกับเริ่มต้นบนปุ่มได้เนื่องจากเป็นแบบฮาร์ดโค้ดในเบราว์เซอร์ (เบราว์เซอร์แต่ละตัวจะแสดงผลปุ่มในแบบของตัวเอง) ลองอ่านบทความเกี่ยวกับรูปแบบปุ่มนี้


6
ไม่ใช่ป้ายกำกับบนปุ่มคือ "ไม่ได้เลือกไฟล์" ที่อยู่ข้างๆ เมื่อฉันเลือกไฟล์มันจะเปลี่ยนจาก No file selected เป็น fileName.something ดังนั้นฉันเชื่อว่ามันควรจะเปลี่ยนแปลงได้
FranXh

@JeremyThille เพราะคนก็คือคน
AMN

220

ซ่อนอินพุตด้วย css เพิ่มป้ายกำกับและกำหนดให้กับปุ่มอินพุต ป้ายกำกับจะสามารถคลิกได้และเมื่อคลิกมันจะเปิดกล่องโต้ตอบไฟล์

<input type="file" id="files" class="hidden"/>
<label for="files">Select file</label>

จากนั้นจัดรูปแบบป้ายกำกับเป็นปุ่มหากคุณต้องการ


1
สิ่งนี้ใช้ได้แม้ใน IE9 ซึ่งคุณไม่สามารถซ่อนfile inputและคลิกจาก JavaScript ได้ ขอบคุณ!
huysentruitw

1
นี่มันเยี่ยมมาก ความสง่างามของการแฮ็ก รักมัน.
เบ็น

3
ทางออกที่ดีนี่ควรเป็นคำตอบที่ได้รับการยอมรับ
Multitut

1
วิธีแก้ปัญหาที่ยอดเยี่ยมมันยังช่วยให้สามารถปรับแต่งฟิลด์ได้อย่างง่ายดาย
SAFAD

8
โซลูชัน html ที่น่าสนใจ แต่ไม่ดีต่อการใช้งาน ผู้ใช้จะเห็น "เลือกไฟล์" หรือเทียบเท่าเสมอแม้ว่าจะเลือกไฟล์แล้วก็ตาม
Cthulhu

26

ลองนี่เป็นเพียงเคล็ดลับ

<input type="file" name="uploadfile" id="img" style="display:none;"/>
<label for="img">Click me to upload image</label>

มันทำงานอย่างไร

มันง่ายมาก องค์ประกอบป้ายกำกับใช้แท็ก "for" เพื่ออ้างอิงองค์ประกอบของแบบฟอร์มตามรหัส ในกรณีนี้เราใช้ "img" เป็นคีย์อ้างอิงระหว่างกัน เมื่อเสร็จแล้วทุกครั้งที่คุณคลิกที่ป้ายกำกับระบบจะเรียกเหตุการณ์การคลิกองค์ประกอบของฟอร์มโดยอัตโนมัติซึ่งเป็นเหตุการณ์การคลิกองค์ประกอบไฟล์ในกรณีของเรา จากนั้นเราทำให้องค์ประกอบไฟล์มองไม่เห็นโดยใช้ display: none และ not visibility: hidden เพื่อไม่ให้เกิดพื้นที่ว่าง

สนุกกับการเขียนโค้ด


2
คุณสามารถทำให้คำตอบนี้ดีขึ้นได้โดยอธิบายว่ามันทำงานอย่างไร
dorukayhan

ดูเหมือนว่าการลากไฟล์จะไม่ทำงานเมื่อคุณดำเนินการนี้
fonZ

16

http://jsfiddle.net/ZDgRG/

ดูลิงค์ด้านบน ฉันใช้ css เพื่อซ่อนข้อความเริ่มต้นและใช้ป้ายกำกับเพื่อแสดงสิ่งที่ฉันต้องการ:

<div><input type='file' title="Choose a video please" id="aa" onchange="pressed()"><label id="fileLabel">Choose file</label></div>

input[type=file]{
    width:90px;
    color:transparent;
}

window.pressed = function(){
    var a = document.getElementById('aa');
    if(a.value == "")
    {
        fileLabel.innerHTML = "Choose file";
    }
    else
    {
        var theSplit = a.value.split('\\');
        fileLabel.innerHTML = theSplit[theSplit.length-1];
    }
};

13

ใช่แล้วไม่มีวิธีใดที่จะลบ 'no file choosen' นี้ได้แม้ว่าคุณจะมีรายการไฟล์ที่อัปโหลดไว้ล่วงหน้าก็ตาม

วิธีแก้ปัญหาที่ง่ายที่สุดที่ฉันพบ (และใช้ได้กับ IE, FF, CR) มีดังต่อไปนี้

  1. ซ่อนข้อมูลที่คุณป้อนและเพิ่มปุ่ม "ไฟล์"
  2. จากนั้นเรียกปุ่ม 'ไฟล์' และขอให้เขาผูก fileupload (ฉันใช้ JQuery ในตัวอย่างนี้)

$('.addfiles').on('click', function() { $('#fileupload').click();return false;});
<button class="addfiles">Add Files</button>
<input id="fileupload" type="file" name="files[]" multiple style='display: none;'>

เสร็จแล้วทำงานได้อย่างสมบูรณ์ :)

เฟรด


7

$(function () {
     $('input[type="file"]').change(function () {
          if ($(this).val() != "") {
                 $(this).css('color', '#333');
          }else{
                 $(this).css('color', 'transparent');
          }
     });
})
input[type="file"]{
    color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" name="app_cvupload" class="fullwidth input rqd">


สิ่งนี้ทำงานได้อย่างมีประสิทธิภาพมากโดยจะซ่อนข้อความใกล้กับอินพุตไฟล์
always-a-learner

6

แต่ถ้าคุณพยายามลบคำแนะนำเครื่องมือนี้

<input type='file' title=""/>

สิ่งนี้เคยชิน นี่คือเคล็ดลับเล็ก ๆ น้อย ๆ ของฉันในการทำงานนี้ลองชื่อด้วยช่องว่าง มันจะทำงาน.:)

<input type='file' title=" "/>

ฉันทดสอบใน Chrome และเบราว์เซอร์ทั้งหมด มันทำงานได้ดี คุณช่วยทดสอบและยืนยันได้ไหม
simon

4
ทดสอบอีกครั้งใน Chrome, Safari, Firefox มันไม่ทำงาน.
AdamInTheOculus

ฉันตรวจสอบใน Chrome เวอร์ชัน 56.0.2924.87 มันทำงานได้ดีอย่างสมบูรณ์ คุณใช้รุ่นไหนอยู่ @PantsMagee
simon

เพียงแค่เพิ่มคำแนะนำเครื่องมือพร้อมข้อความที่คุณตั้งไว้ที่titleแอตทริบิวต์อย่างที่ฉันเห็น
Fyodor


3

HTML

  <div class="fileUpload btn btn-primary">
    <label class="upload">
      <input name='Image' type="file"/>
    Upload Image
    </label>
  </div>

CSS

input[type="file"]
{
  display: none;
}
.fileUpload input.upload 
{
    display: inline-block;
}

หมายเหตุ: Btn btn-primary คือคลาสของปุ่ม bootstrap อย่างไรก็ตามปุ่มอาจดูผิดตำแหน่ง หวังว่าคุณจะสามารถแก้ไขได้โดย inline css


3
 .vendor_logo_hide{
      display: inline !important;;
      color: transparent;
      width: 99px;
    }
    .vendor_logo{
      display: block !important;
      color: black;
      width: 100%; 
    }

$(document).ready(function() {
  // set text to select company logo 
  $("#Uploadfile").after("<span class='file_placeholder'>Select Company Logo</span>");
  // on change
  $('#Uploadfile').change(function() {
    //  show file name 
    if ($("#Uploadfile").val().length > 0) {
      $(".file_placeholder").empty();
      $('#Uploadfile').removeClass('vendor_logo_hide').addClass('vendor_logo');
      console.log($("#Uploadfile").val());
    } else {
      // show select company logo
      $('#Uploadfile').removeClass('vendor_logo').addClass('vendor_logo_hide');
      $("#Uploadfile").after("<span class='file_placeholder'>Select  Company Logo</span>");
    }

  });

});
.vendor_logo_hide {
  display: inline !important;
  ;
  color: transparent;
  width: 99px;
}

.vendor_logo {
  display: block !important;
  color: black;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="file" class="vendor_logo_hide" name="v_logo" id='Uploadfile'>
<span class="fa fa-picture-o form-control-feedback"></span>

<div>
  <p>Here defualt no choose file is set to select company logo. if File is selected then it will displays file name</p>
</div>


ฉันจะให้ข้อความ "เลือกโลโก้ บริษัท " แสดงอยู่ใต้ปุ่มได้อย่างไรไม่ใช่ทางด้านขวา ??
อเล็กซ์

3

การใช้ฉลากที่มีการเปลี่ยนแปลงข้อความฉลาก

<input type="file" id="files" name="files" class="hidden"/>
<label for="files" id="lable_file">Select file</label>

เพิ่ม jquery

<script>
     $("#files").change(function(){
        $("#lable_file").html($(this).val().split("\\").splice(-1,1)[0] || "Select file");     
     });
</script>

2

เพียงแค่เปลี่ยนความกว้างของอินพุต ประมาณ 90px

<input type="file" style="width: 90px" />


1
มันง่ายและใช้งานได้ดี ความกว้างเพียง 100px; :)
Sachin Shah

1
<div class="field">
    <label class="field-label" for="photo">Your photo</label>
    <input class="field-input" type="file" name="photo"  id="photo" value="photo" />
</div>

และ css

input[type="file"]
{ 
   color: transparent; 
   background-color: #F89406; 
   border: 2px solid #34495e; 
   width: 100%; 
   height: 36px; 
   border-radius: 3px; 
}

1
อินพุต [type = "file"] {color: transparent; สีพื้นหลัง: # F89406; เส้นขอบ: 2px ทึบ # 34495e; ความกว้าง: 100%; ความสูง: 36px; เส้นขอบรัศมี: 3px; }
Ir Calif

1

คุณสามารถลองด้วยวิธีนี้:

<div>
    <label for="user_audio" class="customform-control">Browse Computer</label>
    <input type='file' placeholder="Browse computer" id="user_audio"> <span id='val'></span>
 <span id='button'>Select File</span>
</div>

ในการแสดงไฟล์ที่เลือก:

$('#button').click(function () {
    $("input[type='file']").trigger('click');
})

$("input[type='file']").change(function () {
    $('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
    $('.customform-control').hide();
})

ขอขอบคุณ @ Unlucky13 สำหรับการเลือกชื่อไฟล์

นี่คือการทำงานซอ:

http://jsfiddle.net/eamrmoc7/


0

วิธีนี้จะช่วยให้คุณเปลี่ยนชื่อ "ไม่มีไฟล์เลือกที่จะเลือกรูปโปรไฟล์"

<input type='file'id="files" class="hidden"/>  
<label for="files">Select profile picture</label>

ปุ่มหายไป
Diansheng

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

0

ฉันจะใช้ "ปุ่ม" แทน "ป้ายกำกับ" หวังว่านี่จะช่วยใครบางคนได้

สิ่งนี้จะแสดงปุ่มผู้ใช้ที่คลิกจะเป็นตัวเลือกไฟล์ป๊อปอัปหลังจากเลือกไฟล์แล้วจะอัปโหลดโดยอัตโนมัติ

<button onclick='<%= "$(\"#" + FileUpload1.ClientID + "\").click(); return false;" %>'>The Text You Want</button>

<asp:FileUpload onchange="$('#btnUpload').click();" ID="FileUpload1" runat="server" style="display: none;" />

<asp:Button ID="btnUpload" ClientIDMode="Static" runat="server" OnClick="btnUpload_Click" style="display: none;" />

0

คุณสามารถใช้รหัส css ต่อไปนี้เพื่อซ่อน (ไม่ได้เลือกไฟล์)

HTML

<input type="file" name="page_logo" id="page_logo">

CSS

input[type="file"]:after {color: #fff}

ตรวจสอบให้แน่ใจว่าสีตรงกับสีพื้นหลัง


-1

มีตัวอย่างที่ดี (ซึ่งรวมถึงการตรวจสอบประเภทไฟล์) ที่:

https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html

โดยพื้นฐานแล้วมันเป็นความคิดของ Amos ในเวอร์ชันเนื้อแท้ในการใช้ปุ่ม

ฉันลองทำตามคำแนะนำข้างต้นหลายข้อ แต่ไม่ประสบความสำเร็จ (แต่นั่นอาจเป็นฉันเอง)

ฉันตั้งใจใหม่ให้ทำการแปลงไฟล์ Excel โดยใช้

  <form>
    <div>
      <label for="excel_converts">Choose a spreadsheet to convert.</label>
      <input type="file" id="excel_converts" name="excel_converts" accept=".xlsx, .xls, .csv" >
    </div>
    <div class="preview">
      <p>No spreadsheet currently selected for conversion</p>
    </div>
    <div>
      <button>Submit</button>
    </div>
  </form>

ดังนั้นจึงถูกลงคะแนนว่าทำไม? บางทีอาจเป็นเพราะในโพสต์ที่ไม่เกี่ยวข้องกันโดยสิ้นเชิงฉันแนะนำว่าการทำ downvotes แบบเข่ากระตุกนั้นง่าย แต่จะง่ายน้อยกว่ามาก?
DLyons
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.