Làm thế nào để bạn phong cách một type="file"nút đầu vào ?

Đầu vào tập tin kiểu dáng rất khó khăn, vì hầu hết các trình duyệt sẽ không thay đổi giao diện từ CSS hoặc javascript.

Ngay cả kích thước của đầu vào cũng sẽ không đáp ứng với lượt thích:

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

Thay vào đó, bạn sẽ cần sử dụng thuộc tính kích thước:

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

Đối với bất kỳ kiểu dáng nào phức tạp hơn thế (ví dụ: thay đổi giao diện của nút duyệt), bạn sẽ cần xem xét cách tiếp cận khéo léo của việc phủ một nút được tạo kiểu và hộp nhập liệu ở trên đầu vào tệp gốc. Bài viết đã được rm đề cập tại www.quirksmode.org/dom/inputfile.html là bài viết hay nhất tôi từng thấy.

CẬP NHẬT

Mặc dù rất khó để tạo kiểu <input>thẻ trực tiếp, nhưng điều này có thể dễ dàng với sự trợ giúp của <label>thẻ. Xem câu trả lời dưới đây từ @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

Bạn không cần JavaScript cho việc này! Đây là một giải pháp đa trình duyệt:

Xem ví dụ này! - Nó hoạt động trong Chrome / FF / IE - (IE10 / 9/8/7)

Cách tiếp cận tốt nhất là có một phần tử nhãn tùy chỉnh với forthuộc tính được gắn vào phần tử nhập tệp ẩn . ( forThuộc tính của nhãn phải khớp với phần tử tệp idđể làm việc này).

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

Thay vào đó, bạn cũng có thể chỉ cần bọc phần tử nhập tệp bằng nhãn trực tiếp: (ví dụ)

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

Về kiểu dáng, chỉ cần ẩn ¹ phần tử đầu vào bằng cách sử dụng bộ chọn thuộc tính .

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

Sau đó, tất cả những gì bạn cần làm là phong cách các labelyếu tố tùy chỉnh . (ví dụ) .

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

¹ - Điều đáng chú ý là nếu bạn ẩn phần tử bằng cách sử dụng display: none, nó sẽ không hoạt động trong IE8 trở xuống. Ngoài ra, hãy lưu ý rằng mặc định xác thực jQuery không xác thực các trường ẩn theo mặc định. Nếu một trong những điều đó là một vấn đề đối với bạn, thì đây là hai phương pháp khác nhau để ẩn đầu vào ( 1 , 2 ) hoạt động trong những trường hợp này.

làm theo các bước sau đó bạn có thể tạo kiểu tùy chỉnh cho biểu mẫu tải lên tệp của mình:

1. đây là mẫu HTML đơn giản (vui lòng đọc các nhận xét HTML tôi đã viết ở đây bên dưới)

   <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. sau đó sử dụng tập lệnh đơn giản này để chuyển sự kiện nhấp vào thẻ đầu vào.

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

   Bây giờ bạn có thể sử dụng bất kỳ loại kiểu dáng nào mà không phải lo lắng về cách thay đổi kiểu mặc định.

Tôi biết điều này rất rõ vì tôi đã cố gắng thay đổi các kiểu mặc định trong một tháng rưỡi. tin tôi đi, rất khó vì các trình duyệt khác nhau có thẻ đầu vào tải lên khác nhau. Vì vậy, sử dụng cái này để xây dựng các hình thức tải lên tập tin tùy chỉnh của bạn. Dưới đây là mã UPLOAD TỰ ĐỘNG đầy đủ.

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>

Ẩn nó bằng css và sử dụng nút tùy chỉnh với $ (bộ chọn) .click () để kích hoạt nút duyệt. sau đó đặt một khoảng để kiểm tra giá trị của kiểu nhập tệp. khoảng thời gian có thể hiển thị giá trị cho người dùng để người dùng có thể thấy những gì đang được tải lên. khoảng thời gian sẽ xóa khi biểu mẫu được gửi [EDIT] Xin lỗi tôi đã rất bận rộn để cập nhật bài đăng này, đây là một ví dụ

<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

Câu đố : http://jsfiddle.net/M7BXC/

Bạn cũng có thể đạt được mục tiêu của mình mà không cần jQuery với JavaScript thông thường.

Bây giờ newBtn được liên kết với html_btn và bạn có thể tạo kiểu btn mới của mình như bạn muốn: D

Tất cả các công cụ kết xuất tự động tạo một nút khi một <input type="file"> tạo. Trong lịch sử, nút đó đã hoàn toàn không thể tạo kiểu. Tuy nhiên, Trident và WebKit đã thêm móc thông qua các yếu tố giả.

Cây đinh ba

Kể từ IE10, nút nhập tệp có thể được tạo kiểu bằng ::-ms-browsephần tử giả. Về cơ bản, bất kỳ quy tắc CSS nào bạn áp dụng cho một nút thông thường đều có thể được áp dụng cho phần tử giả. Ví dụ:

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

<input type="file">

Điều này sẽ hiển thị như sau trong IE10 trên Windows 8:

WebKit

WebKit cung cấp một hook cho nút nhập tệp của nó với ::-webkit-file-upload-buttonphần tử giả. Một lần nữa, khá nhiều quy tắc CSS có thể được áp dụng, do đó, ví dụ Trident cũng sẽ hoạt động ở đây:

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

<input type="file">

Điều này sẽ hiển thị như sau trong Chrome 26 trên OS X:

Nếu bạn đang sử dụng Bootstrap 3, điều này có hiệu quả với tôi:

Xem http://www.abeautitablesite.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>

Cái nào tạo ra nút nhập tệp sau:

Nghiêm túc, hãy kiểm tra http://www.abeautitablesite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

Ví dụ hoạt động ở đây với hỗ trợ Kéo và thả tự nhiên: https://jsfiddle.net/j40xvkb3/

Khi tạo kiểu đầu vào tệp, bạn không nên phá vỡ bất kỳ tương tác gốc nào mà đầu vào cung cấp .

Các display: none tiếp cận phá vỡ hỗ trợ kéo và thả bản địa.

Để không phá vỡ bất cứ điều gì, bạn nên sử dụng opacity: 0cách tiếp cận cho đầu vào và định vị nó bằng cách sử dụng mẫu tương đối / tuyệt đối trong một trình bao bọc.

Sử dụng kỹ thuật này, bạn có thể dễ dàng tạo kiểu vùng nhấp / thả cho người dùng và thêm lớp tùy chỉnh trong javascript vào dragentersự kiện để cập nhật kiểu và cung cấp cho người dùng phản hồi để cho anh ta thấy rằng anh ta có thể thả tệp.

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

Dưới đây là một ví dụ hoạt động (có thêm JS để xử lý các dragoversự kiện và các tệp bị bỏ).

https://jsfiddle.net/j40xvkb3/

Hy vọng điều này sẽ giúp!

Tôi có thể làm điều đó với CSS thuần bằng cách sử dụng mã dưới đây. Tôi đã sử dụng bootstrap và 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>

Bạn có thể bọc loại đầu vào = "tệp" bên trong nhãn cho đầu vào. Định kiểu nhãn theo cách bạn muốn và ẩn đầu vào bằng màn hình: none;

Đây là một giải pháp không thực sự tạo kiểu cho <input type="file" />phần tử mà thay vào đó sử dụng một <input type="file" />phần tử bên trên các phần tử khác (có thể được tạo kiểu). Do đó, <input type="file" />phần tử không thực sự hiển thị, ảo ảnh tổng thể là một điều khiển tải lên tệp được tạo kiểu độc đáo.

Tôi đã gặp vấn đề này gần đây và mặc dù có rất nhiều câu trả lời trên Stack Overflow, nhưng không có gì thực sự phù hợp với dự luật. Cuối cùng, tôi đã kết thúc việc tùy chỉnh nó để có một giải pháp đơn giản và thanh lịch.

Tôi cũng đã thử nghiệm điều này trên Firefox, IE (11, 10 & 9), Chrome và Opera, iPad và một vài thiết bị Android.

Đây là liên kết 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>

Hi vọng điêu nay co ich!!!

Điều này là đơn giản với jquery. Để đưa ra một ví dụ mã về đề xuất của Ryan với một sửa đổi nhỏ.

Html cơ bản:

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

Đảm bảo đặt kiểu dáng trên đầu vào khi bạn sẵn sàng: opacity: 0 Bạn không thể đặt display: nonevì nó cần phải có thể nhấp được. Nhưng bạn có thể đặt nó dưới nút "mới" hoặc nhét vào bên dưới thứ khác bằng chỉ số z nếu bạn thích.

Thiết lập một số jquery để nhấp vào đầu vào thực khi bạn nhấp vào hình ảnh.

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

Bây giờ nút của bạn đang hoạt động. Chỉ cần cắt và dán giá trị khi thay đổi.

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

Ta đa! Bạn có thể cần phân tích val () thành một cái gì đó có ý nghĩa hơn nhưng bạn nên thiết lập tất cả.

Đặt nút tải lên trên nút hoặc phần tử đẹp của bạn và ẩn nó.

Rất đơn giản và sẽ hoạt động trên mọi trình duyệt

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

Kiểu dáng

.upload-wrap {
    position: relative;
}

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

TẦM NHÌN: TRICK ẩn

Tôi thường đi visibility:hiddenlừa

đây là nút theo kiểu của tôi

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

đây là kiểu đầu vào = nút tập tin. Lưu ý visibility:hiddenquy tắc

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

đây là bit JavaScript để dán chúng lại với nhau. Nó hoạt động

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

cách duy nhất tôi có thể nghĩ đến là tìm nút bằng javascript sau khi nó được hiển thị và gán kiểu cho nó

bạn cũng có thể nhìn vào bài viết này

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

Tôi thường sử dụng javascript đơn giản để tùy chỉnh thẻ nhập tệp. Trường nhập ẩn, khi nhấp vào nút, javascript gọi trường ẩn, giải pháp đơn giản với bất kỳ css hoặc bó jquery nào.

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

Ở đây chúng tôi sử dụng một khoảng để kích hoạt đầu vào của loại tệp và chúng tôi chỉ cần tùy chỉnh khoảng đó , vì vậy chúng tôi có thể thêm bất kỳ kiểu dáng nào bằng cách này.

Lưu ý rằng chúng tôi sử dụng thẻ đầu vào với khả năng hiển thị: tùy chọn ẩn và kích hoạt nó trong khoảng.

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

Tài liệu tham khảo

Đây là một cách hay để làm điều đó với tải lên tập tin vật liệu / góc. Bạn có thể làm tương tự với nút bootstrap.

Lưu ý tôi đã sử dụng <a>thay vì <button>điều này cho phép các sự kiện nhấp vào bong bóng.

<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>

CHỈ CSS

Sử dụng rất đơn giản và DỄ DÀNG

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

Có lẽ rất nhiều điều đáng sợ. Nhưng tôi thích điều này trong CSS thuần với các nút 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"/>

Fiddle: https://jsfiddle.net/zoutepopcorn/v2zkbpay/1/

Đừng để bị lừa bởi các giải pháp CSS "tuyệt vời" thực sự rất dành riêng cho trình duyệt hoặc lớp phủ nút được tạo kiểu trên đầu nút thực hoặc buộc bạn phải sử dụng <label>thay vì một<button> hoặc bất kỳ hack nào khác . JavaScript IS cần thiết để làm cho nó hoạt động để sử dụng chung. Vui lòng nghiên cứu cách gmail và DropZone làm điều đó nếu bạn không tin tôi.

Chỉ cần tạo kiểu cho một nút bình thường theo cách bạn muốn, sau đó gọi một hàm JS đơn giản để tạo và liên kết một phần tử đầu vào ẩn với nút được tạo kiểu của bạn.

<!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>

Lưu ý cách mã trên liên kết lại nó sau mỗi lần người dùng chọn một tệp. Điều này rất quan trọng vì "onchange" chỉ được gọi nếu người dùng thay đổi tên tệp. Nhưng bạn có thể muốn nhận tệp mỗi khi người dùng cung cấp.

Nhiều giải pháp tập tin với tên tệp được chuyển đổi

VÍ DỤ 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 với 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 không có 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;
  });
});

Đây là một giải pháp, cũng hiển thị tên tệp đã chọn: 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; }

Tuần này tôi cũng cần tùy chỉnh nút và hiển thị tên tệp đã chọn sang một bên, vì vậy sau khi đọc một số câu trả lời ở trên (Cảm ơn BTW) tôi đã đưa ra cách thực hiện sau:

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 (góc cạnh)

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

        $scope.fileName = 'No file chosen';

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

Về cơ bản, tôi đang làm việc với lib tải lên tập tin, Angular-khôn ngoan Tôi ràng buộc tên tệp với phạm vi $ của tôi và đặt cho nó giá trị ban đầu là 'Không có tệp nào được chọn', tôi cũng liên kết hàm onFileSelect () với phạm vi của tôi vì vậy khi một tệp được chọn, tôi nhận được tên tệp bằng cách sử dụng API ng-upload và gán nó cho $ scope.filename.

Đơn giản chỉ cần mô phỏng một lần nhấp vào <input>bằng cách sử dụng trigger()chức năng khi nhấp vào một kiểu <div>. Tôi đã tạo nút riêng của mình trong số a <div>và sau đó kích hoạt nhấp chuột inputkhi nhấp vào <div>. Điều này cho phép bạn tạo nút của mình theo bất kỳ cách nào bạn muốn bởi vì đó là <div>và mô phỏng một lần nhấp vào tệp của bạn <input>. Sau đó sử dụng display: nonetrên của bạn <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");
});

Cách tốt nhất là sử dụng phần tử giả: after hoặc: before như một phần tử vượt qua đầu vào de. Sau đó, phong cách mà yếu tố giả như bạn muốn. Tôi khuyên bạn nên làm theo kiểu chung cho tất cả các tệp đầu vào như sau:

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

Cách tốt nhất tôi đã tìm thấy là có một input type: filethiết lập sau đó display: none. Cho nó một cái id. Tạo một nút hoặc bất kỳ yếu tố nào khác mà bạn muốn mở đầu vào tệp.

Sau đó thêm một trình lắng nghe sự kiện vào nó (nút) mà khi nhấp vào sẽ mô phỏng một lần nhấp vào đầu vào tệp gốc. Giống như nhấp vào một nút có tên hello nhưng nó sẽ mở ra một cửa sổ tập tin.

Mã ví dụ

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

javascript

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

Css có thể làm rất nhiều ở đây ... với một chút mánh khóe ...

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

:: tham khảo :: http://site-o-matic.net/?viewpost=19

-beyey

Tôi đã tìm thấy một phương pháp rất dễ dàng để chuyển nút tập tin thành hình ảnh. Bạn chỉ cần gắn nhãn một hình ảnh và đặt nó trên đầu nút tập tin.

<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>

Khi nhấp vào hình ảnh được dán nhãn, bạn chọn nút tập tin.

Chỉ có cách tiếp cận này cung cấp cho bạn toàn bộ sự linh hoạt! 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();
});

Điều này ẩn nút tập tin đầu vào, nhưng dưới mui xe nhấp vào nó từ một nút bình thường khác, rõ ràng bạn có thể tạo kiểu như bất kỳ nút nào khác. Đây là giải pháp duy nhất không có nhược điểm nào ngoài nút DOM vô dụng. Nhờ display:none;, nút đầu vào không dành bất kỳ không gian hiển thị nào trong DOM.

(Tôi không biết ai sẽ tặng đạo cụ cho việc này nữa. Nhưng tôi đã có ý tưởng đó từ đâu đó trên Stackoverflow.)