คุณจัดสไตล์type="file"ปุ่มอย่างไร

อินพุตไฟล์จัดแต่งทรงผมนั้นค่อนข้างยากเนื่องจากเบราว์เซอร์ส่วนใหญ่จะไม่เปลี่ยนรูปลักษณ์จากทั้ง CSS หรือจาวาสคริปต์

แม้ขนาดของอินพุตจะไม่ตอบสนองต่อสิ่งที่ชอบของ:

<input type="file" style="width:200px">

คุณจะต้องใช้แอตทริบิวต์ size แทน:

<input type="file" size="60" />

สำหรับการออกแบบใด ๆ ที่ซับซ้อนกว่านั้น (เช่นการเปลี่ยนรูปลักษณ์ของปุ่มเรียกดู) คุณจะต้องดูวิธีการที่ซับซ้อนของการวางซ้อนปุ่มและสไตล์ของกล่องที่ด้านบนของอินพุตไฟล์ดั้งเดิม บทความที่กล่าวถึงแล้วโดย rm ที่www.quirksmode.org/dom/inputfile.htmlเป็นบทความที่ดีที่สุดที่ฉันเคยเห็น

UPDATE

แม้ว่ามันจะยากที่จะจัดสไตล์<input>แท็กโดยตรง แต่ก็สามารถทำได้โดยง่ายด้วยความช่วยเหลือของ<label>แท็ก ดูคำตอบด้านล่างจาก @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

คุณไม่ต้องการ JavaScript สำหรับสิ่งนี้! นี่คือโซลูชันข้ามเบราว์เซอร์:

ดูตัวอย่างนี้! - ใช้งานได้ใน Chrome / FF / IE - (IE10 / 9/8/7)

วิธีที่ดีที่สุดคือการมีองค์ประกอบป้ายกำกับที่กำหนดเองที่มีforคุณสมบัติที่แนบมากับองค์ประกอบไฟล์ที่ซ่อนอยู่ ( forแอตทริบิวต์ของป้ายกำกับต้องตรงกับองค์ประกอบไฟล์idเพื่อให้สามารถใช้งานได้)

<label for="file-upload" class="custom-file-upload">
    Custom Upload
</label>
<input id="file-upload" type="file"/>

นอกจากนี้คุณยังสามารถรวมองค์ประกอบของไฟล์เข้ากับฉลากได้โดยตรง: (ตัวอย่าง)

<label class="custom-file-upload">
    <input type="file"/>
    Custom Upload
</label>

ในแง่ของการจัดแต่งทรงผมเพียงแค่ซ่อน¹องค์ประกอบเข้าโดยใช้ตัวเลือกแอตทริบิวต์

input[type="file"] {
    display: none;
}

จากนั้นทั้งหมดที่คุณต้องทำคือจัดlabelองค์ประกอบของสไตล์ที่กำหนดเอง (ตัวอย่าง)

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

¹ - เป็นที่น่าสังเกตว่าถ้าคุณซ่อนองค์ประกอบโดยใช้display: noneมันจะไม่ทำงานใน IE8 และด้านล่าง นอกจากนี้โปรดทราบด้วยว่าการตรวจสอบ jQuery ไม่ได้ตรวจสอบความถูกต้องของฟิลด์ที่ซ่อนอยู่ตามค่าเริ่มต้น หากสิ่งเหล่านี้เป็นปัญหาสำหรับคุณนี่คือวิธีการสองวิธีที่แตกต่างกันในการซ่อนอินพุต ( 1 , 2 ) ที่ทำงานในสถานการณ์เหล่านี้

ทำตามขั้นตอนเหล่านี้จากนั้นคุณสามารถสร้างสไตล์ที่กำหนดเองสำหรับแบบฟอร์มอัปโหลดไฟล์ของคุณ:

1. นี่เป็นรูปแบบ HTML แบบง่าย (โปรดอ่านความคิดเห็น HTML ที่ฉันได้เขียนไว้ด้านล่าง)

   <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;" onclick="getFile()">Click to upload!</div>
     <!-- this is your file input tag, so i hide it!-->
     <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
     <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
     <input type="submit" value='submit' >
   </form>
   

2. จากนั้นใช้สคริปต์ง่ายๆนี้เพื่อส่งเหตุการณ์คลิกไปยังแท็กอินพุตไฟล์

   function getFile(){
        document.getElementById("upfile").click();
   }
   

   ตอนนี้คุณสามารถใช้สไตล์ใดก็ได้โดยไม่ต้องกังวลเกี่ยวกับวิธีเปลี่ยนสไตล์เริ่มต้น

ฉันรู้เรื่องนี้ดีมากเพราะฉันพยายามเปลี่ยนสไตล์เริ่มต้นเป็นเวลาหนึ่งเดือนครึ่ง เชื่อฉันมันยากมากเพราะเบราว์เซอร์ที่แตกต่างกันมีแท็กอินพุตที่อัปโหลดต่างกัน ดังนั้นใช้อันนี้เพื่อสร้างรูปแบบการอัพโหลดไฟล์ที่คุณกำหนดเอง นี่คือรหัสอัปโหลดอัตโนมัติเต็มรูปแบบ

function getFile() {
  document.getElementById("upfile").click();
}

function sub(obj) {
  var file = obj.value;
  var fileName = file.split("\\");
  document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
  document.myForm.submit();
  event.preventDefault();
}

#yourBtn {
  position: relative;
  top: 150px;
  font-family: calibri;
  width: 150px;
  padding: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border: 1px dashed #BBB;
  text-align: center;
  background-color: #DDD;
  cursor: pointer;
}

<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
  <div id="yourBtn" onclick="getFile()">click to upload a file</div>
  <!-- this is your file input tag, so i hide it!-->
  <!-- i used the onchange event to fire the form submission-->
  <div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)" /></div>
  <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
  <!-- <input type="submit" value='submit' > -->
</form>

ซ่อนด้วย css และใช้ปุ่มที่กำหนดเองพร้อมกับ $ (selector) .click () เพื่อเปิดใช้งานปุ่มเรียกดู จากนั้นตั้งค่าช่วงเวลาเพื่อตรวจสอบค่าของประเภทอินพุตไฟล์ ช่วงเวลาสามารถแสดงค่าสำหรับผู้ใช้เพื่อให้ผู้ใช้สามารถเห็นการอัปโหลดคืออะไร ช่วงเวลาจะชัดเจนเมื่อส่งแบบฟอร์ม [แก้ไข] ขออภัยฉันยุ่งมากหมายถึงการอัพเดทโพสต์นี่คือตัวอย่าง

<form action="uploadScript.php" method="post" enctype="multipart/form-data">
<div>
    <!-- filename to display to the user -->
    <p id="file-name" class="margin-10 bold-10"></p>

    <!-- Hide this from the users view with css display:none; -->
    <input class="display-none" id="file-type" type="file" size="4" name="file"/>

    <!-- Style this button with type image or css whatever you wish -->
    <input id="browse-click" type="button" class="button" value="Browse for files"/>

    <!-- submit button -->
    <input type="submit" class="button" value="Change"/>
</div>

$(window).load(function () {
    var intervalFunc = function () {
        $('#file-name').html($('#file-type').val());
    };
    $('#browse-click').on('click', function () { // use .live() for older versions of jQuery
        $('#file-type').click();
        setInterval(intervalFunc, 1);
        return false;
    });
});

HTML

<div class="new_Btn">SelectPicture</div><br>
<input id="html_btn" type='file'" /><br>

CSS

.new_Btn {
// your css propterties
}

#html_btn {
 display:none;
}

jQuery

$('.new_Btn').bind("click" , function () {
        $('#html_btn').click();
    });
//edit: 6/20/2014: Be sure to use ".on" not ".bind" for newer versions of jQuery

ซอ : http://jsfiddle.net/M7BXC/

คุณสามารถบรรลุเป้าหมายด้วย jQuery ด้วย JavaScript ปกติ

ตอนนี้ newBtn เชื่อมโยงกับ html_btn และคุณสามารถจัดรูปแบบ btn ใหม่ของคุณตามที่คุณต้องการ: D

เอ็นจิ้นการเรนเดอร์ทั้งหมดจะสร้างปุ่มโดยอัตโนมัติเมื่อมีการ<input type="file">สร้าง ในอดีตปุ่มนั้นไม่สามารถใช้งานได้อย่างสมบูรณ์ อย่างไรก็ตามตรีศูลและ WebKit ได้เพิ่ม hooks ผ่านองค์ประกอบหลอก

ตรีศูล

ตั้งแต่ IE10 ปุ่มอินพุตไฟล์สามารถจัดรูปแบบโดยใช้::-ms-browseองค์ประกอบหลอก โดยทั่วไปแล้วกฎ CSS ใด ๆ ที่คุณใช้กับปุ่มปกติสามารถใช้กับองค์ประกอบหลอกได้ ตัวอย่างเช่น:

::-ms-browse {
  background: black;
  color: red;
  padding: 1em;
}

<input type="file">

จะแสดงดังต่อไปนี้ใน IE10 บน Windows 8:

WebKit

WebKit จัดให้มีเบ็ดสำหรับปุ่มอินพุตไฟล์ที่มี::-webkit-file-upload-buttonองค์ประกอบหลอก อีกครั้งกฎ CSS ใด ๆ สามารถใช้งานได้ดังนั้นตัวอย่างของตรีศูลจะทำงานที่นี่เช่นกัน:

::-webkit-file-upload-button {
  background: black;
  color: red;
  padding: 1em;
}

<input type="file">

จะแสดงดังต่อไปนี้ใน Chrome 26 บน OS X:

หากคุณใช้ Bootstrap 3 สิ่งนี้ได้ผลสำหรับฉัน:

ดูhttp://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<span class="btn btn-primary btn-file">
    Browse...<input type="file">
</span>

ซึ่งสร้างปุ่มอินพุตไฟล์ต่อไปนี้:

อย่างจริงจังตรวจสอบhttp://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

ตัวอย่างการทำงานที่นี่พร้อมการรองรับการลากและวางแบบดั้งเดิม: https://jsfiddle.net/j40xvkb3/

เมื่อจัดแต่งทรงผมการป้อนข้อมูลไฟล์ที่คุณไม่ควรทำลายใด ๆ ของการปฏิสัมพันธ์พื้นเมืองการป้อนข้อมูลให้

display: noneวิธีการแบ่งการลากและวางสนับสนุนพื้นเมือง

หากต้องการไม่ทำลายอะไรคุณควรใช้opacity: 0วิธีการสำหรับการป้อนข้อมูลและวางตำแหน่งโดยใช้รูปแบบที่สัมพันธ์ / สัมบูรณ์ใน wrapper

การใช้เทคนิคนี้คุณสามารถจัดสไตล์โซนคลิก / วางสำหรับผู้ใช้และเพิ่มคลาสที่กำหนดเองในจาวาสคริปต์ในdragenterเหตุการณ์เพื่ออัปเดตสไตล์และให้ข้อเสนอแนะแก่ผู้ใช้เพื่อให้เขาเห็นว่าเขาสามารถวางไฟล์ได้

HTML:

<label for="test">
  <div>Click or drop something here</div>
  <input type="file" id="test">
</label>

CSS:

input[type="file"] {
  position: absolute;
  left: 0;
  opacity: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}

div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccc;
  border: 3px dotted #bebebe;
  border-radius: 10px;
}

label {
  display: inline-block;
  position: relative;
  height: 100px;
  width: 400px;
}

นี่คือตัวอย่างการทำงาน (พร้อม JS เพิ่มเติมเพื่อจัดการdragoverเหตุการณ์และไฟล์ที่ถูกดร็อป)

https://jsfiddle.net/j40xvkb3/

หวังว่านี่จะช่วยได้!

ฉันสามารถทำได้ด้วยCSS บริสุทธิ์โดยใช้โค้ดด้านล่าง ฉันใช้ bootstrap และ font-awesome

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

<label class="btn btn-default btn-sm center-block btn-file">
  <i class="fa fa-upload fa-2x" aria-hidden="true"></i>
  <input type="file" style="display: none;">
</label>

 <label>
    <input type="file" />
 </label>

คุณสามารถใส่ type = "file" ของคุณในฉลากสำหรับอินพุต จัดรูปแบบฉลากอย่างไรก็ตามคุณต้องการและซ่อนอินพุตด้วยจอแสดงผล: ไม่มี;

นี่คือวิธีการแก้ปัญหาที่ไม่ได้จัดวาง<input type="file" />องค์ประกอบ แต่ใช้<input type="file" />องค์ประกอบที่อยู่ด้านบนขององค์ประกอบอื่น ๆ (ซึ่งสามารถเรียกใช้สไตล์) <input type="file" />องค์ประกอบที่มองไม่เห็นจริงๆจึงภาพลวงตาโดยรวมเป็นไฟล์ควบคุมการอัปโหลดสไตล์อย่าง

ฉันเจอปัญหานี้เมื่อเร็ว ๆ นี้และแม้จะมีคำตอบมากมายเกี่ยวกับ Stack Overflow ดูเหมือนว่าจะไม่มีใครเหมาะสมกับบิลเลย ในที่สุดฉันก็สิ้นสุดการปรับแต่งนี้เพื่อให้มีวิธีที่ง่ายและสง่างาม

ฉันได้ทดสอบสิ่งนี้กับ Firefox, IE (11, 10 & 9), Chrome และ Opera, iPad และอุปกรณ์ android สองสามตัว

นี่คือลิงค์ JSFiddle -> http://jsfiddle.net/umhva747/

$('input[type=file]').change(function(e) {
    $in = $(this);
    $in.next().html($in.val());
    
});

$('.uploadButton').click(function() {
    var fileName = $("#fileUpload").val();
    if (fileName) {
        alert(fileName + " can be uploaded.");
    }
    else {
        alert("Please select a file to upload");
    }
});

body {
    background-color:Black;
}

div.upload {
    background-color:#fff;
    border: 1px solid #ddd;
    border-radius:5px;
    display:inline-block;
    height: 30px;
    padding:3px 40px 3px 3px;
    position:relative;
    width: auto;
}

div.upload:hover {
    opacity:0.95;
}

div.upload input[type="file"] {
    display: input-block;
    width: 100%;
    height: 30px;
    opacity: 0;
    cursor:pointer;
    position:absolute;
    left:0;
}
.uploadButton {
    background-color: #425F9C;
    border: none;
    border-radius: 3px;
    color: #FFF;
    cursor:pointer;
    display: inline-block;
    height: 30px;
    margin-right:15px;
    width: auto;
    padding:0 20px;
    box-sizing: content-box;
}

.fileName {
    font-family: Arial;
    font-size:14px;
}

.upload + .uploadButton {
    height:38px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
    <div class="upload">
        <input type="button" class="uploadButton" value="Browse" />
        <input type="file" name="upload" accept="image/*" id="fileUpload" />
        <span class="fileName">Select file..</span>
    </div>
    <input type="button" class="uploadButton" value="Upload File" />
</form>

หวังว่านี่จะช่วย !!!

นี่คือ jquery ง่าย ๆ ด้วย เพื่อให้ตัวอย่างโค้ดของข้อเสนอแนะของRyanมีการแก้ไขเล็กน้อย

HTML พื้นฐาน:

<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">

ตรวจสอบให้แน่ใจว่าตั้งค่าสไตล์ในอินพุตเมื่อคุณพร้อม: opacity: 0 คุณไม่สามารถตั้งค่าได้display: noneเนื่องจากจะต้องคลิกได้ แต่คุณสามารถวางตำแหน่งไว้ใต้ปุ่ม "ใหม่" หรือซ่อนตัวอยู่ใต้สิ่งอื่นด้วยดัชนี z หากคุณต้องการ

ตั้งค่า jquery เพื่อคลิกอินพุตจริงเมื่อคุณคลิกที่ภาพ

$('#image_icon').click(function() {
    $('#the_real_file_input').click();
});

ตอนนี้ปุ่มของคุณกำลังทำงาน เพียงแค่ตัดและวางค่าเมื่อมีการเปลี่ยนแปลง

$('input[type=file]').bind('change', function() {
    var str = "";
    str = $(this).val();
    $("#filename").text(str);
}).change();

Tah dah! คุณอาจจำเป็นต้องแยกวิเคราะห์ val () กับบางสิ่งที่มีความหมายมากกว่า แต่คุณควรตั้งค่าทั้งหมด

วางปุ่มอัปโหลดไฟล์ไว้บนปุ่มหรือองค์ประกอบที่ดีของคุณแล้วซ่อนไว้

ง่ายมากและจะทำงานกับเบราว์เซอร์ใด ๆ

<div class="upload-wrap">
    <button type="button" class="nice-button">upload_file</button>
    <input type="file" name="file" class="upload-btn">
</div>

รูปแบบ

.upload-wrap {
    position: relative;
}

.upload-btn {
    position: absolute;
    left: 0;
    opacity: 0;
}

ทัศนวิสัย: ซ่อนตัวง่าย ๆ

ฉันมักจะไปสำหรับvisibility:hiddenเคล็ดลับ

นี่คือปุ่มสไตล์ของฉัน

<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>

นี่คือปุ่มอินพุต type = file หมายเหตุvisibility:hiddenกฎ

<input type="file" id="upload" style="visibility:hidden;">

นี่เป็นบิต JavaScript เพื่อรวมเข้าด้วยกัน มันได้ผล

<script>
 $('#uploadbutton').click(function(){
    $('input[type=file]').click();
 });
 </script>

วิธีเดียวที่ฉันคิดได้คือหาปุ่มที่มี javascript หลังจากที่แสดงผลและกำหนดสไตล์ให้กับมัน

คุณอาจดูการเขียนนี้

<input type="file" name="media" style="display-none" onchange="document.media.submit()">

ปกติแล้วฉันจะใช้จาวาสคริปต์ง่าย ๆ เพื่อปรับแต่งแท็กอินพุตไฟล์ฟิลด์อินพุตที่ซ่อนอยู่เมื่อคลิกปุ่มจาวาสคริปต์จะเรียกฟิลด์ที่ซ่อนอยู่โซลูชันที่ง่ายโดยไม่ต้องใช้ css หรือเครือ jquery

<button id="file" onclick="$('#file').click()">Upload File</button>

ที่นี่เราใช้การขยายเพื่อเรียกอินพุตไฟล์ประเภทและเราปรับแต่งการขยายนั้นเพื่อให้เราสามารถเพิ่มสไตล์ใด ๆ โดยใช้วิธีนี้

โปรดทราบว่าเราใช้แท็กอินพุตพร้อมการมองเห็น: ตัวเลือกที่ซ่อนและเรียกใช้ในช่วง

.attachFileSpan{
color:#2b6dad;
cursor:pointer;
}
.attachFileSpan:hover{
text-decoration: underline;
}

<h3> Customized input of type file </h3>
<input id="myInput" type="file" style="visibility:hidden"/>

        <span title="attach file" class="attachFileSpan" onclick="document.getElementById('myInput').click()">
        Attach file
        </span>

การอ้างอิง

นี่เป็นวิธีที่ดีในการอัปโหลดไฟล์ / วัสดุเชิงมุม คุณสามารถทำเช่นเดียวกันด้วยปุ่มบูต

หมายเหตุฉันใช้<a>แทน<button>สิ่งนี้อนุญาตให้เหตุการณ์การคลิกทำให้เกิดฟองขึ้น

<label>
    <input type="file" (change)="setFile($event)" style="display:none" />

    <a mat-raised-button color="primary">
      <mat-icon>file_upload</mat-icon>
      Upload Document
    </a>

  </label>

CSS เท่านั้น

ใช้สิ่งนี้ง่ายมากและง่าย

Html:

<label>Attach your screenshort</label>
                <input type="file" multiple class="choose">

css:

.choose::-webkit-file-upload-button {
    color: white;
    display: inline-block;
    background: #1CB6E0;
    border: none;
    padding: 7px 15px;
    font-weight: 700;
    border-radius: 3px;
    white-space: nowrap;
    cursor: pointer;
    font-size: 10pt;
}

อาจเป็นเรื่องที่น่าตกใจมาก แต่ฉันชอบสิ่งนี้ใน CSS บริสุทธิ์พร้อมปุ่ม fa:

.divs {
    position: relative;
    display: inline-block;
    background-color: #fcc;
}

.inputs {
    position:absolute;
    left: 0px;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: #00f;
    z-index:999;
}

.icons {
    position:relative;
}

<div class="divs">
<input type='file' id='image' class="inputs">
<i class="fa fa-image fa-2x icons"></i>
</div>

<div class="divs">
<input type='file' id='book' class="inputs">
<i class="fa fa-book fa-5x icons"></i>
</div>
<br><br><br>
<div class="divs">
<input type='file' id='data' class="inputs">
<i class="fa fa-id-card fa-3x icons"></i>
</div>





<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

ซอ: https://jsfiddle.net/zoutepopcorn/v2zkbpay/1/

อย่าหลงกลโดย CSS-only ที่ยอดเยี่ยมสำหรับเบราว์เซอร์หรือวางทับปุ่มสไตล์ที่ด้านบนของปุ่มจริงหรือบังคับให้คุณใช้<label>แทน<button>หรือแฮ็คอื่น ๆ . จำเป็นต้องใช้ JavaScript เพื่อให้สามารถใช้งานได้ทั่วไป โปรดศึกษาว่า gmail และ DropZone ทำได้อย่างไรถ้าคุณไม่เชื่อฉัน

เพียงแค่จัดสไตล์ปุ่มปกติตามที่คุณต้องการจากนั้นเรียกใช้ฟังก์ชัน JS ง่ายๆเพื่อสร้างและเชื่อมโยงองค์ประกอบอินพุตที่ซ่อนอยู่กับปุ่มสไตล์ของคุณ

<!DOCTYPE html>
<meta charset="utf-8">

<style>
    button {
        width            : 160px;
        height           : 30px;
        font-size        : 13px;
        border           : none;
        text-align       : center;
        background-color : #444;
        color            : #6f0;
    }
    button:active {
        background-color : #779;
    }
</style>

<button id="upload">Styled upload button!</button>

<script>

function Upload_On_Click(id, handler) {
    var hidden_input = null;
    document.getElementById(id).onclick = function() {hidden_input.click();}
    function setup_hidden_input() {
        hidden_input && hidden_input.parentNode.removeChild(hidden_input);
        hidden_input = document.createElement("input");
        hidden_input.setAttribute("type", "file");
        hidden_input.style.visibility = "hidden";
        document.querySelector("body").appendChild(hidden_input);
        hidden_input.onchange = function() {
            handler(hidden_input.files[0]);
            setup_hidden_input();
        };
    }
    setup_hidden_input();
}

Upload_On_Click("upload", function(file) {
    console.log("GOT FILE: " + file.name);
});

</script>

สังเกตว่าโค้ดข้างต้นเชื่อมโยงอีกครั้งหลังจากทุกครั้งที่ผู้ใช้เลือกไฟล์ สิ่งนี้สำคัญเนื่องจาก "onchange" ถูกเรียกใช้เฉพาะเมื่อผู้ใช้เปลี่ยนชื่อไฟล์ แต่คุณอาจต้องการรับไฟล์ทุกครั้งที่ผู้ใช้ให้มัน

โซลูชันไฟล์หลายไฟล์พร้อมชื่อไฟล์ที่แปลงแล้ว

Bootstrap ตัวอย่าง

HTML:

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file1" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file2" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

1. JS ด้วย jQuery:

$().ready(function($){
    $('.search-file-btn').children("input").bind('change', function() {
    var fileName = '';
    fileName = $(this).val().split("\\").slice(-1)[0];
    $(this).parent().next("span").html(fileName);
  })
});

2. JS โดยไม่มี jQuery

Array.prototype.forEach.call(document.getElementsByTagName('input'), function(item) {
  item.addEventListener("change", function() {
    var fileName = '';
    fileName = this.value.split("\\").slice(-1)[0];
    this.parentNode.nextElementSibling.innerHTML = fileName;
  });
});

นี่คือวิธีการแก้ปัญหาที่ยังแสดงชื่อไฟล์ที่เลือก: http://jsfiddle.net/raft9pg0/1/

HTML:

<label for="file-upload" class="custom-file-upload">Chose file</label>
<input id="file-upload" type="file"/>
File: <span id="file-upload-value">-</span>

JS:

$(function() {
    $("input:file[id=file-upload]").change(function() {
        $("#file-upload-value").html( $(this).val() );
    });
});

CSS:

input[type="file"] {
    display: none;
}

.custom-file-upload {
      background: #ddd;
      border: 1px solid #aaa;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      color: #444;
      display: inline-block;
      font-size: 11px;
      font-weight: bold;
      text-decoration: none;
      text-shadow: 0 1px rgba(255, 255, 255, .75);
      cursor: pointer;
      margin-bottom: 20px;
      line-height: normal;
      padding: 8px 10px; }

สัปดาห์นี้ฉันยังต้องการกำหนดปุ่มเองและแสดงชื่อไฟล์ที่เลือกไว้ข้างหลังดังนั้นหลังจากอ่านคำตอบข้างต้นแล้ว (ขอบคุณ BTW) ฉันจึงเริ่มทำตามขั้นตอนต่อไปนี้:

HTML:

<div class="browse">
<label id="uploadBtn" class="custom-file-upload">Choose file
<input type="file" name="fileInput" id="fileInput" accept=".yaml" ngf-select ngf-change="onFileSelect($files)" />
</label>
<span>{{fileName}}</span>
</div>

CSS

   input[type='file'] {
    color: #a1bbd5;
    display: none;

}

.custom-file-upload {
    border: 1px solid #a1bbd5;
    display: inline-block;
    padding: 2px 8px;
    cursor: pointer;
}

label{
    color: #a1bbd5;
    border-radius: 3px;
}

Javascript (เชิงมุม)

app.controller('MainCtrl', function($scope) {

        $scope.fileName = 'No file chosen';

          $scope.onFileSelect = function ($files) {
          $scope.selectedFile = $files;
          $scope.fileName = $files[0].name;
    };
});

โดยทั่วไปฉันทำงานกับ ng-file-upload lib, Angular-wise ฉันเชื่อมโยงชื่อไฟล์กับ $ scope ของฉันและกำหนดค่าเริ่มต้นเป็น 'ไม่เลือกไฟล์' ฉันยังผูกฟังก์ชัน onFileSelect () เพื่อ ขอบเขตของฉันดังนั้นเมื่อเลือกไฟล์ฉันได้รับชื่อไฟล์โดยใช้ ng-upload API และกำหนดให้กับ $ scope.filename

เพียงแค่คลิกที่จำลองได้<input>โดยใช้ฟังก์ชั่นเมื่อคลิกที่สไตล์trigger() <div>ฉันสร้างปุ่มของตัวเองออกมาจาก<div>นั้นคลิกที่เรียกได้เมื่อคลิกของฉันinput <div>นี้จะช่วยให้คุณสามารถสร้างปุ่มของคุณ แต่คุณต้องการเพราะมันเป็นและจำลองการคลิกที่ไฟล์ของคุณ<div> <input>จากนั้นใช้บนdisplay: none<input>

// div styled as my load file button
<div id="simClick">Load from backup</div>

<input type="file" id="readFile" />

// Click function for input
$("#readFile").click(function() {
    readFile();
});

// Simulate click on the input when clicking div
$("#simClick").click(function() {
    $("#readFile").trigger("click");
});

วิธีที่ดีที่สุดคือการใช้องค์ประกอบปลอม: after หรือ: before เป็นองค์ประกอบที่เกินกว่าอินพุตเดอ จากนั้นสไตล์องค์ประกอบหลอกตามที่คุณต้องการ ฉันขอแนะนำให้คุณทำตามสไตล์ทั่วไปสำหรับไฟล์อินพุตทั้งหมดดังนี้:

input {
  height: 0px;
  outline: none;
}

input[type="file"]:before {
  content: "Browse";
  background: #fff;
  width: 100%;
  height: 35px;
  display: block;
  text-align: left;
  position: relative;
  margin: 0;
  margin: 0 5px;
  left: -6px;
  border: 1px solid #e0e0e0;
  top: -1px;
  line-height: 35px;
  color: #b6b6b6;
  padding-left: 5px;
  display: block;
}

วิธีที่ดีที่สุดที่ฉันได้พบคือมีแล้วตั้งค่าให้input type: file ให้มันdisplay: none idสร้างปุ่มหรือองค์ประกอบอื่น ๆ ที่คุณต้องการเปิดอินพุตไฟล์

จากนั้นเพิ่มผู้ฟังเหตุการณ์ที่มัน (ปุ่ม) ซึ่งเมื่อคลิกจะจำลองคลิกที่อินพุตไฟล์ต้นฉบับ เช่นเดียวกับการคลิกปุ่มชื่อ hello แต่จะเปิดหน้าต่างไฟล์

รหัสตัวอย่าง

//i am using semantic ui

<button class="ui circular icon button purple send-button" id="send-btn">
      <i class="paper plane icon"></i>
    </button>
  <input type="file" id="file" class="input-file" />

จาวาสคริปต์

var attachButton=document.querySelector('.attach-button');
    attachButton.addEventListener('click', e=>{
        $('#file').trigger("click")
    })

CSS สามารถทำอะไรได้มากมายที่นี่ ... ด้วยกลอุบายเล็ก ๆ น้อย ๆ ...

<div id='wrapper'>
  <input type='file' id='browse'>
</div>

#wrapper {
     width: 93px; /*play with this value */
     height: 28px; /*play with this value */
     background: url('browseBtn.png') 0 0 no-repeat;
     border:none;
     overflow:hidden;
}

#browse{
     margin-left:-145px; /*play with this value */
     opacity:0; /* set to .5 or something so you can better position it as an overlay then back to zero again after you're done */
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

:: การอ้างอิง :: http://site-o-matic.net/?viewpost=19

-วัด

ฉันพบวิธีที่ง่ายมากในการสลับปุ่มไฟล์เป็นรูปภาพ คุณเพียงติดป้ายกำกับรูปภาพและวางไว้ที่ด้านบนของปุ่มไฟล์

<html>
<div id="File button">
    <div style="position:absolute;">
        <!--This is your labeled image-->
        <label for="fileButton"><img src="ImageURL"></label>
    </div>
    <div>
        <input type="file" id="fileButton"/>
    </div>
</div>
</html>

เมื่อคลิกที่ภาพที่มีป้ายกำกับคุณเลือกปุ่มไฟล์

วิธีการนี้จะให้ความยืดหยุ่นแก่คุณทั้งหมด! ES6 / VanillaJS!

HTML:

<input type="file" style="display:none;"></input>
<button>Upload file</button>

javascript:

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('input[type="file"]').click();
});

ซึ่งจะซ่อนปุ่มอินพุตไฟล์ แต่ภายใต้ประทุนจะคลิกจากปุ่มปกติอีกปุ่มหนึ่งซึ่งคุณสามารถจัดวางสไตล์เหมือนกับปุ่มอื่น ๆ ได้อย่างชัดเจน นี่เป็นทางออกเดียวที่ไม่มีข้อเสียนอกเหนือจาก DOM-node ที่ไร้ประโยชน์ ขอบคุณdisplay:none;ที่ปุ่มอินพุตไม่ได้จองพื้นที่ที่มองเห็นได้ใน DOM

(ฉันไม่รู้ว่าใครจะให้อุปกรณ์ประกอบฉากสำหรับเรื่องนี้อีกต่อไป แต่ฉันได้รับความคิดนั้นจากที่ใดที่หนึ่งบน Stackoverflow)