Thay đổi "Không có tệp nào được chọn":

Tôi có một nút "Chọn tệp" như sau (Tôi đang sử dụng Jade nhưng nó phải giống với Html5):

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

Trong trình duyệt, nút này hiển thị một nút có dòng chữ bên cạnh "Không có tệp nào được chọn". Tôi muốn thay đổi văn bản "Không có tệp nào được chọn" thành văn bản khác, như "Không có video nào được chọn" hoặc "Vui lòng chọn video". Tôi đã làm theo những gợi ý đầu tiên ở đây:

Tôi không muốn thấy 'không có tệp nào được chọn' cho trường nhập tệp

Nhưng làm điều này không thay đổi văn bản:

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

Ai có thể giúp tôi tìm ra vấn đề ở đâu?

Tôi khá chắc rằng bạn không thể thay đổi các nhãn mặc định trên các nút, chúng được mã hóa cứng trong các trình duyệt (mỗi trình duyệt hiển thị các chú thích nút theo cách riêng của nó). Kiểm tra bài viết tạo kiểu nút này

Ẩn đầu vào bằng css, thêm nhãn và gán nó vào nút nhập. nhãn sẽ có thể nhấp được và khi nhấp vào, nó sẽ kích hoạt hộp thoại tệp.

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

Sau đó, tạo kiểu cho nhãn dưới dạng một nút nếu bạn muốn.

Hãy thử đây chỉ là một mẹo nhỏ

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

Làm thế nào nó hoạt động

Nó rất đơn giản. phần tử Nhãn sử dụng thẻ "for" để tham chiếu đến phần tử của biểu mẫu theo id. Trong trường hợp này, chúng tôi đã sử dụng "img" làm khóa tham chiếu giữa chúng. Sau khi hoàn tất, bất cứ khi nào bạn nhấp vào nhãn, nó sẽ tự động kích hoạt sự kiện nhấp vào phần tử của biểu mẫu, đó là sự kiện nhấp vào phần tử tệp trong trường hợp của chúng tôi. Sau đó, chúng tôi làm cho phần tử tệp ẩn đi bằng cách sử dụng display: none và không hiển thị: ẩn để nó không tạo ra không gian trống.

Thích viết mã

http://jsfiddle.net/ZDgRG/

Xem liên kết trên. Tôi sử dụng css để ẩn văn bản mặc định và sử dụng nhãn để hiển thị những gì tôi muốn:

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

Đúng vậy, không có cách nào để xóa 'không có tệp nào được chọn' này, ngay cả khi bạn có danh sách các tệp tải lên trước.

Giải pháp đơn giản nhất mà tôi đã tìm thấy (và hoạt động trên IE, FF, CR) là sau đây

1. Ẩn đầu vào của bạn và thêm nút 'tệp'
2. sau đó gọi nút 'tệp' và yêu cầu anh ta liên kết tải tệp lên (tôi đang sử dụng JQuery trong ví dụ này)

$('.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;'>

Nó đã hoàn thành, hoạt động hoàn hảo :)

Fred

Nhưng nếu bạn cố gắng xóa chú giải công cụ này

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

Điều này sẽ không hoạt động. Đây là mẹo nhỏ của tôi để giải quyết vấn đề này, hãy thử đặt tiêu đề với khoảng trắng. Nó sẽ hoạt động. :)

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

Một cái gì đó như thế này có thể hoạt động

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

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

Lưu ý: Btn btn-primary là một lớp của nút bootstrap. Tuy nhiên, nút có thể trông không mong muốn ở vị trí. Hy vọng bạn có thể sửa nó bằng css nội tuyến.

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

sử dụng nhãn với văn bản nhãn đã thay đổi

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

thêm jquery

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

Chỉ cần thay đổi chiều rộng của đầu vào. Khoảng 90px

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

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

và css

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

Bạn có thể thử theo cách này:

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

Để hiển thị tệp đã chọn:

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

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

Cảm ơn @ unlucky13 vì đã chọn tên tệp

Đây là hoạt động fiddle:

http://jsfiddle.net/eamrmoc7/

Điều này sẽ giúp bạn thay đổi tên cho "không có tệp, chọn Chọn ảnh hồ sơ"

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

Tôi sẽ sử dụng "nút" thay vì "nhãn", hy vọng điều này sẽ giúp ai đó.

Điều này sẽ chỉ hiển thị một nút, người dùng nhấp vào sẽ bật lên trình chọn tệp, sau khi tệp được chọn, tự động tải lên.

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

bạn có thể sử dụng mã css sau để ẩn (không có tệp nào được chọn)

HTML

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

CSS

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

ĐẢM BẢO MÀU SẮC PHÙ HỢP VỚI MÀU NỀN

Có một ví dụ tốt (bao gồm xác thực loại tệp) tại:

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

Về cơ bản, nó là một phiên bản mới của ý tưởng sử dụng một nút bấm của Amos.

Tôi đã thử một số đề xuất ở trên nhưng không thành công (nhưng có lẽ đó là tôi).

Tôi đang định hướng lại nó để thực hiện chuyển đổi tệp Excel bằng cách sử dụng

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