มีวิธีการสไตล์<input type=file />องค์ประกอบ(หรือสคริปต์) ที่จะมองเห็นได้เฉพาะปุ่ม "เรียกดู" โดยไม่มีฟิลด์ข้อความ?
ขอบคุณ
แก้ไข : เพียงชี้แจงว่าทำไมฉันถึงต้องการสิ่งนี้ ฉันกำลังใช้รหัสอัปโหลดไฟล์หลายไฟล์จากhttp://www.morningz.com/?p=5และไม่จำเป็นต้องป้อนฟิลด์ข้อความเพราะมันไม่มีค่า สคริปต์เพิ่งเพิ่มไฟล์ที่เลือกใหม่เพื่อรวบรวมในหน้า มันจะดูดีขึ้นมากหากไม่มีฟิลด์ข้อความถ้าเป็นไปได้
คำตอบ:
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />นี่จะใช้งานได้จริงในโครงการของฉันฉันหวังว่านี่จะช่วยได้ :)
ฉันกำลังมีเวลาพยายามทำสิ่งนี้ ฉันไม่ต้องการใช้โซลูชัน Flash และไม่มี jQuery library ใด ๆ ที่ฉันเชื่อถือได้ในทุกเบราว์เซอร์
ฉันมาพร้อมกับโซลูชันของตัวเองซึ่งถูกนำไปใช้อย่างสมบูรณ์ใน CSS (ยกเว้นการเปลี่ยนรูปแบบ onclick เพื่อให้ปุ่มปรากฏเป็น 'คลิก')
คุณสามารถลองตัวอย่างการใช้งานได้ที่นี่: http://jsfiddle.net/VQJ9V/307/ (ทดสอบใน FF 7, IE 9, Safari 5, Opera 11 และ Chrome 14)
มันทำงานได้โดยการสร้างอินพุตไฟล์ขนาดใหญ่ (ที่มีขนาดตัวอักษร: 50px) จากนั้นล้อมรอบใน div ที่มีขนาดคงที่และล้น: ซ่อน อินพุตจะมองเห็นได้ผ่านทาง "หน้าต่าง" div div สามารถให้ภาพพื้นหลังหรือสีข้อความสามารถเพิ่มและการป้อนข้อมูลสามารถทำให้โปร่งใสเพื่อเปิดเผยพื้นหลัง 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)
}แจ้งให้เราทราบหากมีปัญหาใด ๆ กับมันและฉันจะพยายามแก้ไข
ฉันเสียวันของฉันในวันนี้เพื่อให้ทำงานได้ ฉันไม่พบวิธีแก้ไขปัญหาที่นี่ในการทำงานแต่ละสถานการณ์ของฉัน
จากนั้นฉันจำได้ว่าฉันเห็นตัวอย่างสำหรับการอัปโหลดไฟล์ JQueryโดยไม่มีกล่องข้อความ ดังนั้นสิ่งที่ฉันทำก็คือฉันเอาตัวอย่างของพวกเขาและถอดมันออกเป็นส่วนที่เกี่ยวข้อง
อย่างน้อยโซลูชันนี้ใช้ได้กับ IE และ FF และสามารถกำหนดสไตล์ได้อย่างสมบูรณ์ ในตัวอย่างด้านล่างอินพุตไฟล์ถูกซ่อนอยู่ภายใต้ปุ่ม "เพิ่มไฟล์" แฟนซี
<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>ซ่อนองค์ประกอบไฟล์อินพุตและสร้างปุ่มที่มองเห็นได้ซึ่งจะทริกเกอร์เหตุการณ์การคลิกของไฟล์อินพุตนั้น
ลองสิ่งนี้:
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();}
);
});ซ่อนแท็กไฟล์อินพุตด้วย css เพิ่มเลเบลและกำหนดให้กับปุ่มอินพุต ป้ายกำกับจะสามารถคลิกได้และเมื่อคลิกแล้วจะเป็นการเปิดกล่องโต้ตอบของไฟล์
<input type="file" name="imageUpload" id="imageUpload" class="hide"/>
<label for="imageUpload" class="button-style">Select file</label>เพิ่มสไตล์ให้กับป้ายกำกับเป็นปุ่ม
การสาธิตสด
onchangeตัวจัดการไปยังinputเพื่ออนุญาตให้บางรหัส JS รับข้อมูลไฟล์ที่อัปโหลด
มันจะยากมาก ปัญหาของประเภทอินพุตไฟล์นั้นโดยปกติจะประกอบด้วยสององค์ประกอบภาพในขณะที่ถือว่าเป็นองค์ประกอบ DOM เดียว เพิ่มไปที่เบราว์เซอร์หลายแห่งมีรูปลักษณ์และความรู้สึกที่แตกต่างกันของพวกเขาสำหรับการป้อนไฟล์และคุณถูกกำหนดให้เป็นฝันร้าย ดูบทความนี้ใน quirksmode.orgเกี่ยวกับนิสัยใจคอที่ไฟล์อินพุตมี ฉันรับประกันคุณว่ามันจะไม่ทำให้คุณมีความสุข (ฉันพูดจากประสบการณ์)
[แก้ไข]
ที่จริงแล้วฉันคิดว่าคุณอาจหลีกเลี่ยงการใส่ข้อมูลลงในองค์ประกอบคอนเทนเนอร์ (เช่น div) และเพิ่มระยะขอบติดลบให้กับองค์ประกอบ ซ่อนกล่องข้อความอย่างมีประสิทธิภาพปิดหน้าจอ อีกทางเลือกหนึ่งคือการใช้เทคนิคในบทความที่ฉันเชื่อมโยงเพื่อลองสไตล์ให้เป็นปุ่ม
แก้ไขการทำงานในเบราว์เซอร์ทั้งหมดแก้ไข:
<input type = "button" value = "Choose image"
onclick ="javascript:document.getElementById('imagefile').click();">
<input id = "imagefile" type="file" style='visibility: hidden;' name="img"/>ฉันได้ทดสอบใน FF, Chrome & IE - ใช้งานได้ดีและมีสไตล์ที่ใช้เช่นกัน: D
ฉันพยายามใช้โซลูชันสองอันดับแรกและท้ายที่สุดก็เป็นการเสียเวลามากมายสำหรับฉัน ในที่สุดการใช้คลาส. css นี้แก้ไขปัญหา ...
input[type='file'] {
color: transparent;
}ทำ! สะอาดสุด ๆ และเรียบง่ายสุด ๆ ...
อีกวิธีที่ง่ายในการทำเช่นนี้ สร้างแท็ก "ไฟล์ประเภทอินพุต" ใน html และซ่อน จากนั้นคลิกปุ่มและจัดรูปแบบตามต้องการ หลังจากนี้ให้ใช้ javascript / jquery เพื่อเขียนโปรแกรมโดยอัตโนมัติให้คลิกแท็กอินพุตเมื่อคลิกปุ่ม
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;
}นี่คือซอ jiddle ที่ทำงานเหมือนกัน: - http://jsfiddle.net/32na3/
ฉันใช้รหัสที่แนะนำด้านบนและหลังจากเวลาผ่านไปหลายชั่วโมงฉันก็มาถึงวิธีแก้ปัญหาฟรี css bag
คุณสามารถเรียกใช้ที่นี่ - http://jsfiddle.net/WqGph/
แต่แล้วก็พบทางออกที่ดีกว่า - 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/>onchangeเหตุการณ์ไม่ได้ถูกเรียกใช้สำหรับinputองค์ประกอบที่ซ่อนอยู่
นี่คือการรักษาเฒ่าดีของฉัน:
<input type="file" id="myFile" style="display:none;" />
<button type="button" onclick="document.getElementById('myFile').click();">Browse</button>อย่างน้อยก็ทำงานได้ใน Safari
เรียบง่าย.
คุณสามารถติดป้ายกำกับภาพได้ดังนั้นเมื่อคุณคลิกที่ภาพเหตุการณ์การคลิกปุ่มจะเริ่มขึ้น คุณสามารถทำให้ปุ่มปกติที่มองไม่เห็น:
<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>มันทำงานได้สำหรับฉันในเบราว์เซอร์ทั้งหมดและใช้งานง่าย
คุณสามารถส่งเหตุการณ์คลิกบนอินพุตไฟล์ที่ซ่อนอยู่เช่นนี้:
<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'); เปลี่ยน HTMLEvents เป็น MouseEventsvar ev = document.createEvent('MouseEvents');
HTML:
<input type="file" name="upload" id="upload" style="display:none"></input>
<button id="browse">Upload</button>jQuery
$(document).ready(function(){
$("#browse").click(function(){
$("#upload").click();
});
});หวังว่างานนี้ :)
คุณสามารถกำหนดความทึบของแบบอักษรให้กับองค์ประกอบอินพุตเป็น 0 ซึ่งจะซ่อนฟิลด์ข้อความโดยไม่ต้องซ่อนปุ่ม 'เลือกไฟล์'
ไม่ต้องใช้ javascript ให้ล้างเบราว์เซอร์ข้ามไปไกลเท่า IE 9
เช่น,
input {color: rgba(0, 0, 0, 0);}ฉันเป็นทางออกที่แฮ็คจริง ๆ ด้วยสิ่งนี้ ...
<style type="text/css">
input[type="file"]
{
width: 80px;
}
</style>
<input id="File1" type="file" />ปัญหาคือคุณลักษณะความกว้างที่ซ่อนฟิลด์ข้อความจะแตกต่างกันอย่างชัดเจนระหว่างเบราว์เซอร์แตกต่างกันไปตามธีม Windows XP และอื่น ๆ บางทีมันเป็นสิ่งที่คุณสามารถทำงานร่วมกับ? ...
ฉันรู้ว่านี่เป็นโพสต์เก่า แต่วิธีที่ง่ายในการทำให้ข้อความหายไปคือการตั้งค่าสีตัวอักษรเป็นพื้นหลังของคุณ
เช่นถ้าพื้นหลังการป้อนข้อความของคุณเป็นสีขาวแล้ว:
input[type="file"]{
color:#fff;
}สิ่งนี้จะไม่มีผลกับข้อความเลือกไฟล์ซึ่งจะยังคงเป็นสีดำเนื่องจากเบราว์เซอร์
สิ่งนี้ใช้ได้กับฉัน:
input[type="file"] {
color: white!important;
}วิธีแก้ปัญหาของฉันคือการตั้งค่าภายใน div เช่น "druveen" กล่าว แต่ฉันโฆษณาสไตล์ปุ่มของฉันเองไปที่ div (ทำให้มันดูเหมือนปุ่มที่มี: โฮเวอร์) และฉันเพิ่งตั้งสไตล์ "opacity: 0;" เพื่อการป้อนข้อมูล สร้างเสน่ห์ให้ฉันหวังว่ามันจะเป็นแบบเดียวกันกับคุณ
ฉันแค่ตั้งค่าไฟล์อินพุตที่มีความกว้าง: 85px และฟิลด์ข้อความหายไปเลย
รหัส HTML นี้แสดงปุ่มอัพโหลดไฟล์เท่านั้น
<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;
});สำหรับฉันวิธีที่ง่ายที่สุดคือการใช้สีแบบอักษรเช่นสีพื้นหลัง เรียบง่ายไม่หรูหรา แต่มีประโยชน์
<div style="color:#FFFFFF"> <!-- if background page is white, of course -->
<input class="fileInput" type="file" name="file1"/></div>ดังนั้นนี่คือวิธีที่ดีที่สุดในการทำเช่นนี้กับเบราว์เซอร์ทั้งหมด:
ลืม CSS!
<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>คำตอบทั้งหมดเหล่านี้น่ารัก แต่ CSS จะไม่ทำงานเนื่องจากมันไม่เหมือนกันในทุกเบราว์เซอร์และอุปกรณ์คำตอบแรกที่ฉันเขียนจะใช้ได้ในทุกอย่างยกเว้น Safari หากต้องการให้มันทำงานกับเบราว์เซอร์ทั้งหมดตลอดเวลาจะต้องสร้างแบบไดนามิกและสร้างใหม่ทุกครั้งที่คุณต้องการล้างข้อความที่ป้อน:
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);คำตอบของ tmanthey นั้นค่อนข้างดียกเว้นว่าคุณไม่สามารถเล่นกับความกว้างชายแดนใน Firefox v20 ได้ หากคุณเห็นลิงก์ (สาธิตไม่สามารถแสดงได้ที่นี่จริงๆ) พวกเขาแก้ไขปัญหาโดยใช้แบบอักษรขนาด = 23px, แปลง: ขนาด (-300px, 0px) แปล (4) สำหรับ Firefox เพื่อให้ปุ่มมีขนาดใหญ่ขึ้น
โซลูชันอื่น ๆ ที่ใช้. คลิก () ใน div อื่น ๆ นั้นไม่มีประโยชน์หากคุณต้องการทำให้มันเป็นกล่องอินพุต drag'n'drop
มีตัวเลือกที่ใช้ได้หลายตัวที่นี่ แต่คิดว่าฉันจะให้สิ่งที่ฉันคิดขึ้นมาในขณะที่พยายามแก้ไขปัญหาที่คล้ายกัน 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);
}แก้ไขด้วยรหัสต่อไปนี้:
<div style="overflow: hidden;width:83px;">
<input style='float:right;' name="userfile" id="userfile" type="file"/>
</div>
ฉันเขียนสิ่งนี้:
<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();" />ทำงานได้ดีในเบราว์เซอร์ทั้งหมดไม่มี jQuery ไม่มี CSS
ต่อไปนี้เป็นโซลูชันที่ได้รับความนิยมของ @ ampersandre เวอร์ชั่นย่อที่ทำงานได้กับเบราว์เซอร์หลักทั้งหมด มาร์กอัป 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" />รหัส 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');
});
});รหัส 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;
}ใช้ทริกเกอร์คลิก "UploadButton" ที่ซ่อนอยู่สำหรับการโพสต์กลับเซิร์ฟเวอร์ด้วยมาตรฐาน ข้อความ "อัปโหลดไฟล์" จะผลักดันการควบคุมอินพุตออกจากมุมมองใน wrapper div เมื่อโอเวอร์โฟลว์ดังนั้นจึงไม่จำเป็นต้องใช้สไตล์ใด ๆ สำหรับส่วนควบคุม "ไฟล์อินพุต" ตัวเลือก $ ([id $ = "FileInput"]) อนุญาตให้ใช้ส่วนของรหัสที่ใช้ส่วนนำหน้า ASP.NET มาตรฐาน ค่ากล่องข้อความ FilePath ในชุดจากรหัสเซิร์ฟเวอร์ด้านหลังจาก hdnFileName.Value เมื่ออัปโหลดไฟล์แล้ว