Tôi muốn xóa chú giải công cụ "Không có tệp nào được chọn" khỏi đầu vào tệp trong Google Chrome (Tôi thấy rằng không có chú giải công cụ nào được hiển thị trong Firefox).
Xin lưu ý rằng tôi không nói về văn bản bên trong trường nhập mà là về chú giải công cụ xuất hiện khi bạn di chuyển chuột qua đầu vào.
Tôi đã thử điều này mà không may mắn:
$('#myFileInput').attr('title', '');
Câu trả lời:
Đây là một phần gốc của trình duyệt webkit và bạn không thể xóa nó. Bạn nên nghĩ đến một giải pháp hacky như che hoặc ẩn các đầu vào của tệp.
Một giải pháp hacky :
input[type='file'] {
opacity:0
}
<div>
<input type='file'/>
<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, ''))
})
Chú giải công cụ mặc định có thể được chỉnh sửa bằng cách sử dụng thuộc tính title
<input type='file' title="your text" />
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=" "/>
Đối với tôi, tôi chỉ muốn văn bản được ẩn và vẫn sử dụng nút trình duyệt gốc.
input[type='file'] {
color: transparent;
}
Tôi thích tất cả các đề xuất của undefined nhưng tôi có một trường hợp sử dụng khác, hy vọng điều này sẽ giúp ai đó trong tình huống tương tự.
Bạn có thể tắt chú giải công cụ đặt tiêu đề có khoảng trắng trên trình duyệt webkit như Chrome và chuỗi trống trên Firefox hoặc IE (được thử nghiệm trên Chrome 35, FF 29, IE 11, safari mobile)
$('input[type="file"]').attr('title', window.webkitURL ? ' ' : '');
Tất cả các câu trả lời ở đây là hoàn toàn phức tạp, hoặc nói cách khác là hoàn toàn sai.
html:
<div>
<input type="file" />
<button>Select File</button>
</div>
css:
input {
display: none;
}
javascript:
$('button').on('click', function(){
$('input').trigger('click');
});
Tôi đã tạo ra trò chơi này, theo cách đơn giản nhất. Nhấp vào nút Chọn tệp sẽ xuất hiện menu chọn tệp. Sau đó, bạn có thể tạo kiểu cho nút theo bất kỳ cách nào bạn muốn. Về cơ bản, tất cả những gì bạn cần làm là ẩn đầu vào tệp và kích hoạt một lần nhấp tổng hợp vào nó khi bạn nhấp vào một nút khác. Tôi đã thử nghiệm điều này trên IE 9, FF và Chrome, và tất cả chúng đều hoạt động tốt.
Đây là một khó khăn. Tôi không thể tìm thấy cách chọn phần tử 'không có tệp nào được chọn' vì vậy tôi đã tạo một mặt nạ bằng cách sử dụng: sau bộ chọn giả.
Giải pháp của tôi cũng yêu cầu sử dụng bộ chọn giả sau để tạo kiểu cho nút:
::-webkit-file-upload-button
Hãy thử cái này: http://jsfiddle.net/J8Wfx/1/
FYI: Điều này sẽ chỉ hoạt động trong trình duyệt webkit.
Tái bút nếu có ai biết cách xem các bộ chọn giả webkit như cái ở trên trong trình kiểm tra webkit, vui lòng cho tôi biết
Trên tất cả các trình duyệt và đơn giản. điều này đã làm nó cho tôi
$(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">Bạn sẽ cần phải tùy chỉnh điều khiển khá nhiều để đạt được điều này.
Vui lòng làm theo hướng dẫn tại: http://www.quirksmode.org/dom/inputfile.html
Quấn với và làm cho vô hình. Làm việc trong Chrome, Safari && FF.
label {
padding: 5px;
background: silver;
}
label > input[type=file] {
display: none;
}<label>
<input type="file">
select file
</label>Tốt hơn là tránh sử dụng javascript không cần thiết. Bạn có thể tận dụng lợi thế của thẻ nhãn để mở rộng mục tiêu nhấp chuột của đầu vào như sau:
<label>
<input type="file" style="display: none;">
<a>Open</a>
</label>
Mặc dù đầu vào bị ẩn, liên kết vẫn hoạt động như một mục tiêu nhấp chuột cho nó và bạn có thể tạo kiểu cho nó theo cách bạn muốn.
Đi -webkit-appearance:đi. Đáng để thử dù sao.
http://css-infos.net/property/-webkit-appearance
Hy vọng rằng sẽ giúp :)
Trực tiếp bạn không thể sửa đổi nhiều về đầu vào [type = file].
Đặt độ mờ tệp loại đầu vào: 0 và cố gắng đặt một phần tử tương đối [div / span / button] lên nó bằng CSS tùy chỉnh
Tôi tìm kiếm câu trả lời tốt cho điều này ... và tôi tìm thấy điều này:
Đầu tiên hãy xóa 'không có tệp nào được chọn'
input[type="file"]{
font-size: 0px;
}
sau đó làm việc với nút -webkit-file-upload-buttontheo cách này:
input[type="file"]::-webkit-file-input-button{
font-size: 16px; /*normal size*/
}
hy vọng đây là những gì bạn đang tìm kiếm, nó phù hợp với tôi.
Kết hợp một số đề xuất ở trên, sử dụng jQuery, đây là những gì tôi đã làm:
input[type='file'].unused {
color: transparent;
}
Và:
$(function() {
$("input[type='file'].unused").click( function() {$(this).removeClass('unused')});
};
Và đặt lớp "không sử dụng" trên đầu vào tệp của bạn. Điều này là đơn giản và hoạt động khá tốt.
Đối với tôi, giải pháp tốt nhất là bọc input [type = "file"] trong một trình bao bọc và thêm một số mã jquery:
$(function(){
function readURL(input){
if (input.files && input.files[0]){
var reader = new FileReader();
reader.onload = function (e){
$('#uploadImage').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#image").change(function(){
readURL(this);
});
});#image{
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 75px;
height: 35px;
}
#uploadImage{
position: relative;
top: 30px;
left: 70px;
}
.button{
position: relative;
width: 75px;
height: 35px;
border: 1px solid #000;
border-radius: 5px;
font-size: 1.5em;
text-align: center;
line-height: 34px;
}<form action="#" method="post" id="form" >
<div class="button">
Upload<input type="file" id="image" />
</div>
<img id="uploadImage" src="#" alt="your image" width="350" height="300" />
</form>Tôi đã nghĩ ra một giải pháp hack hoàn toàn loại bỏ "Không có tệp nào được chọn" cùng với không gian bổ sung được thêm vào sau văn bản đó (trong Chrome, tôi nhận được thông báo như: "Không có tệp nào được chọn").
Điều này hoàn toàn làm xáo trộn việc căn chỉnh trang của tôi, vì vậy tôi thực sự đã đấu tranh với nó để tìm ra giải pháp. Bên trong thuộc tính style của thẻ đầu vào, việc đặt "width" thành chiều rộng của nút sẽ loại bỏ khoảng trắng và văn bản ở cuối. Vì chiều rộng của nút không giống nhau trong tất cả các trình duyệt (ví dụ: nó nhỏ hơn một chút trong Firefox), bạn cũng sẽ muốn đặt màu của kiểu thành màu giống với màu nền của trang (nếu không sẽ là " Không "có thể hiển thị qua). Thẻ tệp đầu vào của tôi trông giống như sau:
<input style="float:left; **width:88px;** **color:#000000;**" type="file" id="fileInput" onclick="fileOpen()">