Làm cách nào để thay đổi văn bản nút của <input type = tập tin lâm sàng />?

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

Tôi đã cố gắng sửa đổi value, nhưng nó không hoạt động. Làm thế nào để tùy chỉnh văn bản nút?

Sử dụng Bootstrap FileStyle , được sử dụng để định kiểu các trường tệp của biểu mẫu. Nó là một plugin cho một thư viện thành phần dựa trên jQuery có tên là Twitter Bootstrap

Sử dụng mẫu:

Bao gồm:

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

Thông qua JavaScript:

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

Thông qua các thuộc tính dữ liệu:

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

Bạn có thể đặt một hình ảnh thay thế và làm như thế này:

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 : Trong IE9 và IE10 nếu bạn kích hoạt onClick trong đầu vào tệp qua javascript, biểu mẫu sẽ được gắn cờ là 'nguy hiểm' và không thể được gửi bằng javascript, không chắc chắn liệu nó có thể được gửi theo cách truyền thống hay không.

Ẩn tập tin đầu vào. Tạo một đầu vào mới để nắm bắt một sự kiện nhấp chuột và chuyển tiếp nó đến đầu vào ẩn:

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

Văn bản "tệp tải lên ..." được trình duyệt xác định trước và không thể thay đổi. Cách duy nhất để giải quyết vấn đề này là sử dụng thành phần tải lên dựa trên Flash hoặc Java như swfupload .

Hoạt động hoàn hảo trên tất cả các trình duyệt Hy vọng nó cũng sẽ làm việc cho bạn.

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

Thay đổi content: 'Select some files';với văn bản bạn muốn trong''

NẾU KHÔNG LÀM VIỆC VỚI firefox, hãy sử dụng cái này thay vì đầu vào:

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

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

Đây là một plugin JQuery để thay đổi văn bản nút của phần tử tệp đầu vào.

Ví dụ HTML:

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

Ví dụ JS:

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

Kết quả:

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

Mã não

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

thêm http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

Đơn giản

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

[Chỉnh sửa bằng đoạn trích]

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

Tôi nghĩ rằng đây là những gì bạn muốn:

<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 : Bây giờ tôi thấy các bình luận mà bạn đang hỏi về văn bản nút chứ không phải đường dẫn tệp. Lỗi của tôi. Tôi sẽ để lại câu trả lời ban đầu của tôi dưới đây trong trường hợp người khác vấp phải câu hỏi này diễn giải nó theo cách tôi đã làm ban đầu.

EDIT thứ 2 : Tôi đã xóa câu trả lời này vì tôi quyết định rằng tôi đã hiểu nhầm câu hỏi và câu trả lời của tôi không liên quan. Tuy nhiên, các bình luận trong một câu trả lời khác chỉ ra rằng mọi người vẫn muốn xem câu trả lời này vì vậy tôi đã xóa bỏ nó.

TRẢ LỜI GỐC CỦA TÔI (Tôi nghĩ rằng OP đang hỏi về đường dẫn, không phải văn bản nút):

Đây không phải là một tính năng được hỗ trợ vì lý do bảo mật . Trình duyệt web Opera được sử dụng để hỗ trợ này nhưng nó đã bị xóa. Hãy suy nghĩ về những gì sẽ có thể nếu điều này được hỗ trợ; Bạn có thể tạo một trang với đầu vào tải lên tệp, điền trước nó với đường dẫn đến một số tệp nhạy cảm và sau đó tự động gửi biểu mẫu bằng cách sử dụng javascript được kích hoạt bởi onloadsự kiện. Điều này sẽ xảy ra quá nhanh để người dùng làm bất cứ điều gì về nó.

Sử dụng <label>cho chú thích

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

Điều này hoạt động mà không có bất kỳ javascript . Bạn có thể trang trí nhãn theo bất kỳ mức độ phức tạp nào, theo nội dung trái tim của bạn. Khi bạn nhấp vào nhãn, nhấp chuột sẽ tự động được chuyển hướng đến đầu vào tệp. Đầu vào tập tin có thể được làm cho vô hình bằng bất kỳ phương pháp. Nếu bạn muốn nhãn xuất hiện như một nút, có nhiều giải pháp, ví dụ:

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

    text-decoration: none;
    color: initial;
}

Chỉ có lớp 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. Trước đó <input type="file">, thêm một hình ảnh và <input style="position:absolute">nó sẽ chiếm không gian của<input type="file">

2. Sử dụng CSS sau đây cho phần tử tệp

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

Nếu bạn sử dụng đường ray và gặp sự cố khi áp dụng nó, tôi muốn thêm một số mẹo từ câu trả lời ban đầu được đăng bởi @Fernando Kosh

• Tải xuống tệp zip và sao chép tệp bootstrap-filestyle.min.js ke thư mục ứng dụng / tài sản / javascripts /

• mở application.js của bạn và thêm dòng này bên dưới

  // = yêu cầu bootstrap-filestyle.min

• mở cà phê của bạn và thêm dòng này

  $ (": file"). filestyle ({buttonName: "btn-chính", buttonB Before: true, buttonText: "Văn bản của bạn ở đây", icon: false});

Bạn chỉ có thể thêm một số thủ thuật css. bạn không cần javascript hoặc nhiều tệp đầu vào và tôi giữ thuộc tính giá trị hiện có . bạn chỉ cần thêm css . bạn có thể thử giải pháp này

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

Đây là một cách để "thay đổi" văn bản của một đầu vào với loại tệp, với HTML và javascript thuần túy:

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

Đối với tôi nó không hoạt động văn bản tùy chỉnh với bootstrap-filestyle . Nó giúp trang trí nút nhưng nhắn tin kỳ lạ để được thay đổi, trước khi đấu vật với css tôi thử cách sau:

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

bootstrap-filestyle hiển thị thành phần dưới dạng span với một lớp có tên butonText, vì vậy khi tải tài liệu chỉ cần thay đổi văn bản. dễ dàng đúng và nó phải hoạt động trên tất cả các trình duyệt.

chúc mừng

Tôi đã làm nó như thế này cho dự án của tôi:

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

Đây là một giải pháp thay thế có thể giúp ích cho bạn. Điều này ẩn văn bản xuất hiện ra khỏi nút, trộn nó với màu nền của div. Sau đó, bạn có thể cung cấp cho div một tiêu đề bạn thích.

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