Có cách nào để tạo kiểu (hoặc tập lệnh) <input type=file />phần tử chỉ hiển thị nút "Duyệt" mà không có trường văn bản không?
Cảm ơn
Chỉnh sửa : Chỉ để làm rõ lý do tại sao tôi cần điều này. Tôi đang sử dụng mã tải lên nhiều tệp từ http://www.morningz.com/?p=5 và nó không cần trường văn bản đầu vào vì nó không bao giờ có giá trị. Script chỉ cần thêm tập tin mới được chọn vào bộ sưu tập trên trang. Nó sẽ trông tốt hơn nhiều nếu không có trường văn bản, nếu có thể.
Câu trả lời:
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />Điều này chắc chắn sẽ làm việc tôi đã sử dụng nó trong các dự án của tôi. Tôi hy vọng điều này sẽ giúp :)
Tôi đã có một thời gian cố gắng để thực hiện điều này. Tôi không muốn sử dụng giải pháp Flash và không có thư viện jQuery nào tôi xem là đáng tin cậy trên tất cả các trình duyệt.
Tôi đã đưa ra giải pháp của riêng mình, được triển khai hoàn toàn bằng CSS (ngoại trừ thay đổi kiểu onclick để làm cho nút xuất hiện 'nhấp chuột').
Bạn có thể thử một ví dụ hoạt động tại đây: http://jsfiddle.net/VQJ9V/307/ (Đã thử nghiệm trong FF 7, IE 9, Safari 5, Opera 11 và Chrome 14)
Nó hoạt động bằng cách tạo một đầu vào tệp lớn (với cỡ chữ: 50px), sau đó gói nó trong một div có kích thước cố định và tràn: ẩn. Đầu vào sau đó chỉ được hiển thị thông qua div "cửa sổ" này. Div có thể được cung cấp hình ảnh hoặc màu nền, văn bản có thể được thêm vào và đầu vào có thể được làm trong suốt để hiển thị nền div:
HTML:
<div class="inputWrapper">
<input class="fileInput" type="file" name="file1"/>
</div>CSS:
.inputWrapper {
height: 32px;
width: 64px;
overflow: hidden;
position: relative;
cursor: pointer;
/*Using a background color, but you can use a background image to represent a button*/
background-color: #DDF;
}
.fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
z-index: 99;
/*This makes the button huge. If you want a bigger button, increase the font size*/
font-size:50px;
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}Hãy cho tôi biết nếu có bất kỳ vấn đề nào với nó và tôi sẽ cố gắng khắc phục chúng.
Tôi đã lãng phí ngày hôm nay để làm việc này. Tôi không tìm thấy giải pháp nào ở đây để thực hiện từng tình huống của mình.
Sau đó, tôi nhớ rằng tôi đã thấy một ví dụ cho Tải lên tệp JQuery mà không có hộp văn bản. Vì vậy, những gì tôi đã làm là tôi lấy ví dụ của họ và tước nó xuống phần có liên quan.
Giải pháp này ít nhất hoạt động cho IE và FF và có thể được tạo kiểu hoàn toàn. Trong ví dụ dưới đây, đầu vào tệp được ẩn dưới nút "Thêm tệp" ưa thích.
<html>
<head>
<title>jQuery File Upload Example</title>
<style type="text/css">
.myfileupload-buttonbar input
{
position: absolute;
top: 0;
right: 0;
margin: 0;
border: solid transparent;
border-width: 0 0 100px 200px;
opacity: 0.0;
filter: alpha(opacity=0);
-o-transform: translate(250px, -50px) scale(1);
-moz-transform: translate(-300px, 0) scale(4);
direction: ltr;
cursor: pointer;
}
.myui-button
{
position: relative;
cursor: pointer;
text-align: center;
overflow: visible;
background-color: red;
overflow: hidden;
}
</style>
</head>
<body>
<div id="fileupload" >
<div class="myfileupload-buttonbar ">
<label class="myui-button">
<span >Add Files</span>
<input id="file" type="file" name="files[]" />
</label>
</div>
</div>
</body>
</html>Ẩn phần tử tệp đầu vào và tạo nút hiển thị sẽ kích hoạt sự kiện nhấp của tệp đầu vào đó.
Thử cái này:
CSS
#file { width:0; height:0; } HTML:
<input type='file' id='file' name='file' />
<button id='btn-upload'>Upload</button>JAVASCRIPT (jQuery):
$(function(){
$('#btn-upload').click(function(e){
e.preventDefault();
$('#file').click();}
);
});Ẩn thẻ tệp đầu vào bằng css, thêm nhãn và gán cho nút nhập. nhãn sẽ có thể nhấp và khi nhấp vào, nó sẽ kích hoạt hộp thoại tập tin.
<input type="file" name="imageUpload" id="imageUpload" class="hide"/>
<label for="imageUpload" class="button-style">Select file</label>Thêm kiểu vào nhãn dưới dạng nút.
Bản thử trực tiếp
onchangetrình xử lý để inputcho phép một số mã JS nhận thông tin tệp đã tải lên.
Điều đó sẽ rất khó khăn. Vấn đề với kiểu nhập tệp là nó thường bao gồm hai phần tử trực quan, trong khi được coi là một phần tử DOM duy nhất. Thêm vào đó, một số trình duyệt có giao diện riêng biệt cho đầu vào tệp và bạn đang gặp ác mộng. Xem bài viết này trên quirksmode.org về các yêu cầu đầu vào của tệp. Tôi đảm bảo với bạn rằng nó sẽ không làm bạn hạnh phúc (tôi nói từ kinh nghiệm).
[BIÊN TẬP]
Trên thực tế, tôi nghĩ rằng bạn có thể thoát khỏi việc đưa đầu vào của mình vào một phần tử container (như div) và thêm một lề âm cho phần tử. Hiệu quả ẩn phần hộp văn bản tắt màn hình. Một lựa chọn khác là sử dụng kỹ thuật trong bài viết mà tôi đã liên kết, để thử tạo kiểu như nút.
Khắc phục để hoạt động trong tất cả các trình duyệt GIẢI QUYẾT:
<input type = "button" value = "Choose image"
onclick ="javascript:document.getElementById('imagefile').click();">
<input id = "imagefile" type="file" style='visibility: hidden;' name="img"/>Tôi đã thử nghiệm trong FF, Chrome và IE - cũng hoạt động tốt, các kiểu được áp dụng: D
Tôi đã cố gắng thực hiện hai giải pháp hàng đầu và cuối cùng tôi đã lãng phí rất nhiều thời gian. Cuối cùng, việc áp dụng lớp .css này đã giải quyết được vấn đề ...
input[type='file'] {
color: transparent;
}Làm xong! siêu sạch và siêu đơn giản ...
Một cách dễ dàng khác để làm điều này. Tạo một thẻ "tệp loại đầu vào" trong html và ẩn nó. Sau đó nhấp vào một nút và định dạng nó theo nhu cầu. Sau này, sử dụng javascript / jquery để lập trình nhấp vào thẻ đầu vào khi nhấp vào nút.
HTML: -
<input id="file" type="file" style="display: none;">
<button id="button">Add file</button>JavaScript: -
document.getElementById('button').addEventListener("click", function() {
document.getElementById('file').click();
});jQuery: -
$('#button').click(function(){
$('#file').click();
});CSS: -
#button
{
background-color: blue;
color: white;
}Đây là một fiddle JS hoạt động cho cùng: - http://jsfiddle.net/32na3/
Tôi đã sử dụng một số mã được đề xuất ở trên và sau nhiều giờ thắt lưng, cuối cùng tôi đã tìm đến một giải pháp miễn phí túi css.
Bạn có thể chạy nó ở đây - http://jsfiddle.net/WqGph/
nhưng sau đó tìm thấy một giải pháp tốt hơn - http://jsfiddle.net/XMMc4/5/
<input type = "button" value = "Choose image #2"
onclick ="javascript:document.getElementById('imagefile').click();">
<input id = "imagefile" type="file" style='display:none;' name="img" value="none"/>see jsfiddle code for examples<br/>onchangesự kiện không được kích hoạt cho inputphần tử ẩn .
Bạn có thể gắn nhãn một hình ảnh để khi bạn nhấp vào nó, sự kiện nhấp vào nút sẽ được kích hoạt. Bạn chỉ có thể làm cho nút bình thường trở nên vô hình:
<form>
<label for="fileButton"><img src="YourSource"></label> <!--You don't have to put an image here, it can be anything you like-->
<input type="file" id="fileButton" style="display:none;"/>
</form>Nó hoạt động với tôi trên tất cả các trình duyệt và rất dễ sử dụng.
Bạn có thể gửi sự kiện nhấp chuột vào một đầu vào tệp ẩn như thế này:
<form action="#type your action here" method="POST" enctype="multipart/form-data">
<div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" >Click to upload!</div>
<!-- hide input[type=file]!-->
<div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
<input type="submit" value='submit' >
</form>
<script type="text/javascript">
var btn = document.getElementById("yourBtn");
var upfile = document.getElementById("upfile");
btn.addEventListener('click',function(){
if(document.createEvent){
var ev = document.createEvent('MouseEvents');
ev.initEvent('click',true,false);
upfile.dispatchEvent(ev);
}else{
upfile.click();
}
});
</script>var ev = document.createEvent('HTMLEvents'); thay đổi HTMLEvents thành MouseEventsvar ev = document.createEvent('MouseEvents');
HTML:
<input type="file" name="upload" id="upload" style="display:none"></input>
<button id="browse">Upload</button>YÊU CẦU
$(document).ready(function(){
$("#browse").click(function(){
$("#upload").click();
});
});Hy vọng điều này hoạt động :)
Ive một giải pháp thực sự khó khăn với ...
<style type="text/css">
input[type="file"]
{
width: 80px;
}
</style>
<input id="File1" type="file" />Vấn đề là thuộc tính chiều rộng đang ẩn trường văn bản sẽ khác nhau giữa các trình duyệt, khác nhau giữa các chủ đề Windows XP, v.v. Có lẽ đó là thứ bạn có thể làm việc với mặc dù? ...
Tôi biết đây là một bài viết cũ nhưng một cách đơn giản để làm cho văn bản biến mất chỉ là đặt màu văn bản cho nền của bạn.
ví dụ: nếu nền nhập văn bản của bạn màu trắng thì:
input[type="file"]{
color:#fff;
}Điều này sẽ không ảnh hưởng đến văn bản Chọn tệp vẫn sẽ có màu đen do trình duyệt.
Giải pháp của tôi chỉ là đặt nó trong một div như "druveen" đã nói, tuy nhiên tôi quảng cáo kiểu nút riêng của mình cho div (làm cho nó trông giống như một nút với một: hover) và tôi chỉ đặt kiểu "opacity: 0;" đến đầu vào. Làm việc một cơ duyên cho tôi, hy vọng nó làm điều tương tự cho bạn.
Tôi vừa tạo kiểu cho một tệp đầu vào có chiều rộng: 85px và trường văn bản hoàn toàn biến mất
Mã HTML này chỉ hiển thị nút Tải lên tệp
<form action="/action_page.php">
<input type="button" id="id" value="Upload File" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file" onchange="this.form.submit()"/>
</form><a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">
$("#logo").css('opacity','0');
$("#select_logo").click(function(){
$().trigger('click');
return false;
});Đối với tôi, cách đơn giản nhất là sử dụng màu phông chữ như màu nền. Đơn giản, không thanh lịch, nhưng hữu ích.
<div style="color:#FFFFFF"> <!-- if background page is white, of course -->
<input class="fileInput" type="file" name="file1"/></div>Vì vậy, đây là cách tốt nhất để làm điều này CHO TẤT CẢ CÁC NGƯỜI DÙNG:
Quên CSS đi!
<p>Append Image:</p>
<input type="button" id="clickImage" value="Add Image" />
<input type="file" name="images[]" id="images" multiple />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" charset="utf-8"></script>
<script>
$('#images').hide();
$('#clickImage').click( function() {
$('#images').trigger('click');
});
</script>Tất cả những câu trả lời này đều dễ thương, nhưng CSS sẽ không hoạt động vì nó không giống nhau trên tất cả các trình duyệt và thiết bị, câu trả lời đầu tiên tôi viết sẽ hoạt động trong mọi thứ trừ Safari. Để làm cho nó hoạt động trên tất cả các trình duyệt mọi lúc, nó phải được tạo động và được tạo lại mỗi khi bạn muốn xóa văn bản đầu vào:
var imageDiv = document.createElement("div");
imageDiv.setAttribute("id", "imagediv");
imageDiv.style.cssText = 'position:relative; vertical-align: bottom;';
var imageText = document.createTextNode("Append Image:");
var newLine = document.createElement("br");
var image = document.createElement("input");
image.setAttribute("type", "file");
image.setAttribute("id", "images");
image.setAttribute("name", "images[]");
image.setAttribute("multiple", "multiple");
imageDiv.appendChild(imageText);
imageDiv.appendChild(newLine);
imageDiv.appendChild(image);
questionParagraph.appendChild(imageDiv);Câu trả lời của tmanthey khá hay, ngoại trừ việc bạn không thể chơi với độ rộng đường viền trong Firefox v20. Nếu bạn thấy liên kết (bản demo, thực sự không thể hiển thị ở đây), họ đã giải quyết vấn đề bằng cách sử dụng font-size = 23px, Transform: translate (-300px, 0px) scale (4) cho Firefox để có nút lớn hơn.
Các giải pháp khác sử dụng .click () trên một div khác là vô ích nếu bạn muốn biến nó thành hộp nhập liệu kéo.
Có một số tùy chọn hợp lệ ở đây nhưng nghĩ rằng tôi sẽ đưa ra những gì tôi đã đưa ra trong khi cố gắng khắc phục một vấn đề tương tự. http://jsfiddle.net/5RyrG/1/
<span class="btn fileinput-button">
<span>Import Field(s)</span>
<input id="fileupload" type="file" name="files[]" onchange="handleFiles(this.files)" multiple>
</span>
<div id="txt"></div>
function handleFiles(files){
$('#txt').text(files[0].name);
}Tôi đã viết điều này:
<form action='' method='POST' name='form-upload-image' id='form-upload-image' enctype='multipart/form-data'>
<div style="width: 0; height: 0; overflow: hidden;">
<input type="file" name="input-file" id="input-file" onchange="this.files.length > 0 ? document.getElementById('form-upload-image').submit():null;" />
</div>
</form>
<img src="image.jpg" style="cursor: pointer;" onclick="document.getElementById('input-file').click();" />Hoạt động tốt trong tất cả các trình duyệt, không jQuery, không CSS.
Đây là phiên bản đơn giản hóa của giải pháp phổ biến của @ ampersandre, hoạt động trong tất cả các trình duyệt chính. Đánh dấu Asp.NET
<asp:TextBox runat="server" ID="FilePath" CssClass="form-control"
style="float:left; display:inline; margin-right:5px; width:300px"
ReadOnly="True" ClientIDMode="Static" />
<div class="inputWrapper">
<div id="UploadFile" style="height:38px; font-size:16px;
text-align:center">Upload File</div>
<div>
<input name="FileUpload" id="FileInput" runat="server"
type="File" />
</div>
</div>
<asp:Button ID="UploadButton" runat="server"
style="display:none" OnClick="UploadButton_Click" />
</div>
<asp:HiddenField ID="hdnFileName" runat="server" ClientIDMode="Static" />Mã JQuery
$(document).ready(function () {
$('#UploadFile').click(function () {
alert('UploadFile clicked');
$('[id$="FileInput"]').trigger('click');
});
$('[id$="FileInput"]').change(function (event) {
var target = event.target;
var tmpFile = target.files[0].name;
alert('FileInput changed:' + tmpFile);
if (tmpFile.length > 0) {
$('#hdnFileName').val(tmpFile);
}
$('[id$="UploadButton"]').trigger('click');
});
});mã css
.inputWrapper {
height: 38px;
width: 102px;
overflow: hidden;
position: relative;
padding: 6px 6px;
cursor: pointer;
white-space:nowrap;
/*Using a background color, but you can use a background image to represent
a button*/
background-color: #DEDEDE;
border: 1px solid gray;
border-radius: 4px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}Sử dụng một kích hoạt nhấp chuột "UploadButton" ẩn cho postback máy chủ với tiêu chuẩn. Văn bản với "Tải lên tệp" đẩy điều khiển đầu vào ra khỏi chế độ xem trong div trình bao bọc khi nó tràn ra, do đó không cần phải áp dụng bất kỳ kiểu nào cho div điều khiển "đầu vào tệp". Bộ chọn $ ([id $ = "FileInput"]) cho phép phần id với tiền tố ASP.NET tiêu chuẩn được áp dụng. Giá trị hộp văn bản FilePath được đặt từ mã máy chủ phía sau từ hdnFileName.Value khi tệp được tải lên.