Thay đổi văn bản mặc định trong kiểu đầu vào = Tập tin trên mạng?

183

Tôi muốn thay đổi văn bản mặc định trên nút đó là " Choose File" khi chúng tôi sử dụng input="file".

nhập mô tả hình ảnh ở đây

Tôi có thể làm cái này như thế nào? Ngoài ra, như bạn có thể thấy trong nút hình ảnh nằm ở bên trái của văn bản. Làm thế nào tôi có thể đặt nó ở bên phải của văn bản?

html  file  input  default-value 
— Harry niềm vui
nguồn
Có tùy chọn để có được văn bản này để biến?
— kicaj
1
Trả lời bởi ParPar ở đây có lẽ là những gì bạn đang tìm kiếm: stackoverflow.com/questions/1944267/ .
— Aniket Suryavanshi
— Ciro Santilli 冠状 病 六四 事件
Hãy thử giải pháp này: stackoverflow.com/a/30275263/1657573
— Michael Tarimo
— Bae

Câu trả lời:

49

Mỗi trình duyệt có biểu hiện riêng của điều khiển và do đó bạn không thể thay đổi văn bản hoặc hướng của điều khiển.

Có một số hack "loại" bạn có thể muốn thử nếu bạn muốn html/css giải pháp thay vì Flash hoặc ánh bạcgiải pháp.

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive 2007/09/10 / stomme_file_inputs_with_css_and_the_dom

Cá nhân, vì hầu hết người dùng đều sử dụng trình duyệt mà họ chọn, và do đó có lẽ đã quen nhìn thấy điều khiển trong biểu hiện mặc định, nên họ có thể bị nhầm lẫn nếu họ thấy điều gì đó khác biệt (tùy thuộc vào loại người dùng bạn giao dịch) .

— Shiv Kumar
nguồn
177

Sử dụng "for"thuộc tính labelcho input.

<div>
  <label for="files" class="btn">Select Image</label>
  <input id="files" style="visibility:hidden;" type="file">
</div>
Dưới đây là mã để tìm nạp tên của tệp được tải lên 

$("#files").change(function() {
  filename = this.files[0].name
  console.log(filename);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
      <label for="files" class="btn">Select Image</label>
      <input id="files" style="visibility:hidden;" type="file">
    </div>
Mở rộng đoạn trích

— đại số
nguồn
20
display:nonecó thể được sử dụng trên INPUT để nó không sử dụng không gian không cần thiết.
— Master DJon
2
Cảm ơn bạn. Điều này hoạt động hoàn hảo, và chính xác là những gì tôi đang tìm kiếm.
— Chris - Jr
Hoạt động tốt trên Mac với Chrome, FF và Safari. Nếu nó cũng có trên IE thì đây là tùy chọn tốt nhất và đơn giản nhất để định kiểu nút nhập tệp. Cảm ơn!
— Pod
5
hoạt động tốt, chỉ có một chút tiêu cực là người dùng không thể thấy tên của tệp đã được chọn khi lựa chọn.
— luke_mclachlan
2
@Mike Cập nhật bài đăng để tìm nạp tên tệp
— algometrix
29

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

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

</html>
Mở rộng đoạn trích

— 1Cr18Ni9
nguồn
27

Điều này có thể giúp ai đó trong tương lai, bạn có thể định kiểu nhãn cho đầu vào theo ý muốn và đặt bất cứ thứ gì bạn muốn vào bên trong và ẩn đầu vào không hiển thị.

Nó hoạt động hoàn hảo trên cordova với iOS

<link href="https://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css" rel="stylesheet"/>
<label for="imageUpload" class="btn btn-primary btn-block btn-outlined">Seleccionar imagenes</label>
<input type="file" id="imageUpload" accept="image/*" style="display: none">
Mở rộng đoạn trích

— Paulo Mogollón
nguồn
1
giải pháp tốt nhất tôi đã tìm thấy cho đến nay! +1
— danyo
7

Điều đó là không thể. Nếu không, bạn có thể cần phải sử dụng kiểm soát tải lên Silverlight hoặc Flash.

— Anuraj
nguồn
1
Điều này là không thể? Thay đổi văn bản hoặc đặt nút bên phải hoặc cả hai?
— Harry Joy
13
Tôi ủng hộ điều này, vì tôi nghĩ thật không công bằng khi hạ thấp câu trả lời này. Về cơ bản, không thể thay đổi văn bản của nút nhập tệp gốc. "Các giải pháp khả thi" là tất cả các bản hack hoặc cách giải quyết.
— Peter Lee
10
@PeterLee - Hacks là giải pháp, một số thậm chí còn tuân theo thông số W3C.
— Derek 朕 會
3

Đây là cách bạn có thể làm:

jQuery: 

$(function() {
  $("#labelfile").click(function() {
    $("#imageupl").trigger('click');
  });
})

css

.file {
  position: absolute;
  clip: rect(0px, 0px, 0px, 0px);
  display: block;
}
.labelfile {
  color: #333;
  background-color: #fff;
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  white-space: nowrap;
  padding: 6px 8px;
  font-size: 14px;
  line-height: 1.42857143;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Mã HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="margin-top:4px;">
  <input name="imageupl" type="file" id="imageupl" class="file" />
  <label class="labelfile" id="labelfile"><i class="icon-download-alt"></i> Browse File</label>
</div>
— Tushar Shukla
nguồn
3 
<button class="styleClass" onclick="document.getElementById('getFile').click()">Your text here</button>
<input type='file' id="getFile" style="display:none">

Đây vẫn là tốt nhất cho đến nay

— oroyo segun
nguồn
2

Sử dụng Bootstrap bạn có thể làm điều này như mã bên dưới.

<!DOCTYPE html>
<html lang="en">
<head>
<style>

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}
</style>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <span class="btn btn-file">Upload image from here<input type="file">
</body>
</html>
— Rana Aalamgeer
nguồn
Mã này không in trở lại trang web tập tin nào được chọn.
— tale852150
2

Tôi đã tạo một tập lệnh và xuất bản nó tại GitHub: get selectFile.js Dễ sử dụng, thoải mái sao chép.


HTML

<input type=file hidden id=choose name=choose>
<input type=button onClick=getFile.simulate() value=getFile>
<label id=selected>Nothing selected</label>


Mã não

var getFile = new selectFile;
getFile.targets('choose','selected');


BẢN GIỚI THIỆU

jsfiddle.net/Thielicy/4oxmsy49/

— Thielicy
nguồn
2

Cập nhật 2017:

Tôi đã thực hiện nghiên cứu về cách này có thể đạt được. Và lời giải thích / hướng dẫn tốt nhất là ở đây: https://tympanus.net/codrops/2015/09/15/stomme-customizing-file-inputs-smart-way/

Tôi sẽ viết tóm tắt ở đây chỉ trong trường hợp nó không có sẵn. Vì vậy, bạn nên có HTML:

<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>

Sau đó ẩn đầu vào bằng CSS:

.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;}

Sau đó, phong cách nhãn:

.inputfile + label {
font-size: 1.25em;
font-weight: 700;
color: white;
background-color: black;
display: inline-block;
}

Sau đó, tùy chọn bạn có thể thêm JS để hiển thị tên của tệp:

var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
{
var label    = input.nextElementSibling,
    labelVal = label.innerHTML;

input.addEventListener( 'change', function( e )
{
    var fileName = '';
    if( this.files && this.files.length > 1 )
        fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
    else
        fileName = e.target.value.split( '\\' ).pop();

    if( fileName )
        label.querySelector( 'span' ).innerHTML = fileName;
    else
        label.innerHTML = labelVal;
});
});

Nhưng thực sự chỉ cần đọc hướng dẫn và tải về bản demo, nó thực sự tốt.

— người dùng3784950
nguồn
1

Tôi sẽ sử dụng một buttonđể kích hoạt input:

<button onclick="document.getElementById('fileUpload').click()">Open from File...</button>
<input type="file" id="fileUpload" name="files" style="display:none" />

Nhanh chóng và sạch sẽ.

— Sony Santos
nguồn
1

Bạn có thể sử dụng phương pháp này, nó hoạt động ngay cả khi rất nhiều tệp đầu vào.

const fileBlocks = document.querySelectorAll('.file-block')
const buttons = document.querySelectorAll('.btn-select-file')

;[...buttons].forEach(function (btn) {
  btn.onclick = function () {
    btn.parentElement.querySelector('input[type="file"]').click()
  }
})

;[...fileBlocks].forEach(function (block) {
  block.querySelector('input[type="file"]').onchange = function () {
    const filename = this.files[0].name

    block.querySelector('.btn-select-file').textContent = 'File selected: ' + filename
  }
})
.btn-select-file {
  border-radius: 20px;
}

input[type="file"] {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="file-block">
  <button class="btn-select-file">Select Image 1</button>
  <input type="file">
</div>
<br>
<div class="file-block">
  <button class="btn-select-file">Select Image 2</button>
  <input type="file">
</div>
Mở rộng đoạn trích

— ИИяяяяяяя
nguồn
Tôi thích cách tiếp cận này, nhưng đối với tôi Văn bản tệp được chọn không hiển thị, bất kỳ ý tưởng nào là vấn đề. Tôi là google chrome
— N Khan
1

Điều này sẽ làm việc:

input.*className*::-webkit-file-upload-button {
  *style content..*
}
— Thổ Nhĩ Kỳ
nguồn
1

Đây là cách nó được thực hiện với bootstrap, chỉ bạn nên đặt đầu vào ban đầu ở đâu đó ... idk trong đầu và xóa <br> nếu bạn có nó, bởi vì nó chỉ bị ẩn và chiếm không gian của nó :)

 <head> 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 </head>
 
 <label for="file" button type="file" name="image" class="btn btn-secondary">Secondary</button> </label>
    
 <input type="file" id="file" name="image" value="Prebrskaj" style="visibility:hidden;">
 
 
 <footer>
 
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 
 </footer>
Mở rộng đoạn trích

— Leon Tanko
nguồn
0

Hãy để tôi thêm một hack tôi đã sử dụng. Tôi muốn có một phần cho phép bạn kéo và thả tệp và tôi muốn phần kéo và thả đó có thể nhấp được cùng với nút tải lên ban đầu.

Đây là cách nó trông giống như khi tôi hoàn thành (trừ khả năng kéo và thả, có rất nhiều hướng dẫn về cách làm điều đó).

Và sau đó tôi thực sự đã tạo ra một loạt các bài đăng trên blog chủ yếu là về các nút tải lên tập tin.

— wp-overwatch.com
nguồn
0

Ok rất đơn giản cách css thuần để tạo tập tin đầu vào tùy chỉnh của bạn.

Sử dụng nhãn, nhưng như bạn biết từ các câu trả lời trước, nhãn không gọi chức năng onclick trong firefox, có thể là một lỗi nhưng không thành vấn đề với những điều sau đây.

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

Những gì bạn làm là tạo kiểu cho nhãn để xem bạn muốn nó như thế nào

    .custom-file-input {
        color: transparent;/* This is to take away the browser text for file uploading*/
        /* Carry on with the style you want */
        background: url(../img/doc-o.png);
        background-size: 100%;
        position: absolute;
        width: 200px;
        height: 200px;
        cursor: pointer;
        top: 10%;
        right: 15%;
    }

bây giờ chỉ cần ẩn nút đầu vào thực tế, nhưng bạn không thể đặt nó thành visability: hidden

Vì vậy, làm cho vô hình bằng cách thiết lập opacity: 0;

input.custom-file-input {
    opacity: 0;
    position: absolute;/*set position to be exactly over your input*/
    left: 0;
    top: 0;
}

Bây giờ như bạn có thể nhận thấy tôi có cùng một lớp trên nhãn của mình khi tôi thực hiện trường nhập liệu của mình, đó là vì tôi muốn cả hai có cùng kiểu dáng, do đó, bất cứ khi nào bạn nhấp vào nhãn, bạn thực sự đang nhấp vào vô hình trường đầu vào.

— Jadin Hornsby
nguồn
0

Giải pháp của tôi...

HTML:

<input type="file" id="uploadImages" style="display:none;" multiple>

<input type="button" id="callUploadImages" value="Select">
<input type="button" id="uploadImagesInfo" value="0 file(s)." disabled>
<input type="button" id="uploadProductImages" value="Upload">

Câu hỏi:

$('#callUploadImages').click(function(){

    $('#uploadImages').click();
});

$('#uploadImages').change(function(){

    var uploadImages = $(this);
    $('#uploadImagesInfo').val(uploadImages[0].files.length+" file(s).");
});

Đây chỉ là xấu xa: D

— bagatov88
nguồn
0 

$(document).ready(function () {
	$('#choose-file').change(function () {
		var i = $(this).prev('label').clone();
		var file = $('#choose-file')[0].files[0].name;
		$(this).prev('label').text(file);
	}); 
 });
.custom-file-upload{
  background: #f7f7f7; 
  padding: 8px;
  border: 1px solid #e3e3e3; 
  border-radius: 5px; 
  border: 1px solid #ccc; 
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
can you try this

<label for="choose-file" class="custom-file-upload" id="choose-file-label">
   Upload Document
</label>
<input name="uploadDocument" type="file" id="choose-file" 
   accept=".jpg,.jpeg,.pdf,doc,docx,application/msword,.png" style="display: none;" />
Mở rộng đoạn trích

— Rokive
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.