Bagaimana Anda mendesain type="file"tombol input ?

Input file gaya sangat sulit, karena sebagian besar browser tidak akan mengubah tampilan dari CSS atau javascript.

Bahkan ukuran input tidak akan menanggapi suka:

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

Sebagai gantinya, Anda harus menggunakan atribut ukuran:

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

Untuk gaya apa pun yang lebih canggih dari itu (mis. Mengubah tampilan tombol jelajah), Anda perlu melihat pendekatan yang rumit dengan cara overlay tombol bergaya dan kotak input di atas input file asli. Artikel yang telah disebutkan oleh rm di www.quirksmode.org/dom/inputfile.html adalah yang terbaik yang pernah saya lihat.

MEMPERBARUI

Meskipun sulit membuat <input>tag secara langsung, ini mudah dilakukan dengan bantuan <label>tag. Lihat jawaban di bawah ini dari @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

Anda tidak perlu JavaScript untuk ini! Berikut ini adalah solusi lintas-browser:

Lihat contoh ini! - Ia bekerja di Chrome / FF / IE - (IE10 / 9/8/7)

Pendekatan terbaik adalah memiliki elemen label kustom dengan foratribut yang melekat pada elemen input file tersembunyi . ( forAtribut label harus cocok dengan elemen file idagar ini berfungsi).

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

Sebagai alternatif, Anda juga bisa langsung membungkus elemen input file dengan label secara langsung: (contoh)

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

Dalam hal penataan, sembunyikan saja ¹ elemen input menggunakan pemilih atribut .

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

Maka yang perlu Anda lakukan adalah menata labelelemen kustom . (contoh) .

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

¹ - Perlu dicatat bahwa jika Anda menyembunyikan elemen menggunakan display: none, itu tidak akan berfungsi di IE8 dan di bawah. Perhatikan juga fakta bahwa jQuery memvalidasi tidak memvalidasi bidang tersembunyi secara default. Jika salah satu dari hal-hal tersebut menjadi masalah bagi Anda, berikut adalah dua metode berbeda untuk menyembunyikan input ( 1 , 2 ) yang berfungsi dalam keadaan ini.

ikuti langkah-langkah ini maka Anda dapat membuat gaya khusus untuk formulir unggah file Anda:

1. ini adalah bentuk HTML sederhana (baca komentar HTML yang saya tulis di sini di bawah ini)

   <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. kemudian gunakan skrip sederhana ini untuk meneruskan acara klik ke file tag input.

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

   Sekarang Anda dapat menggunakan semua jenis gaya tanpa khawatir tentang cara mengubah gaya default.

Saya tahu ini dengan sangat baik karena saya telah mencoba mengubah gaya default selama satu setengah bulan. percayalah, ini sangat sulit karena browser yang berbeda memiliki tag input unggah yang berbeda. Jadi gunakan yang ini untuk membuat formulir unggah file kustom Anda. Berikut adalah kode lengkap UPLOAD OTOMATIS.

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>

Sembunyikan dengan css dan gunakan tombol kustom dengan $ (selector) .click () untuk mengaktifkan tombol browse. kemudian atur interval untuk memeriksa nilai tipe input file. Interval dapat menampilkan nilai untuk pengguna sehingga pengguna dapat melihat apa yang diunggah. Interval akan dihapus ketika formulir dikirimkan [EDIT] Maaf saya sudah sangat sibuk artinya memperbarui posting ini, berikut adalah contohnya

<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

Fiddle : http://jsfiddle.net/M7BXC/

Anda juga dapat mencapai tujuan tanpa jQuery dengan JavaScript normal.

Sekarang newBtn terhubung dengan html_btn dan Anda dapat memberi gaya btn baru seperti yang Anda inginkan: D

Semua mesin rendering secara otomatis menghasilkan tombol ketika suatu <input type="file">dibuat. Secara historis, tombol itu benar-benar tidak bergaya. Namun, Trident dan WebKit telah menambahkan kait melalui elemen semu.

Trisula

Pada IE10, tombol input file dapat ditata menggunakan ::-ms-browseelemen pseudo. Pada dasarnya, aturan CSS apa pun yang Anda terapkan ke tombol biasa dapat diterapkan ke elemen pseudo. Sebagai contoh:

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

<input type="file">

Ini ditampilkan sebagai berikut di IE10 pada Windows 8:

WebKit

WebKit menyediakan hook untuk tombol input file dengan ::-webkit-file-upload-buttonpseudo-element. Sekali lagi, hampir semua aturan CSS dapat diterapkan, oleh karena itu contoh Trident akan bekerja di sini juga:

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

<input type="file">

Ini ditampilkan sebagai berikut di Chrome 26 pada OS X:

Jika Anda menggunakan Bootstrap 3, ini berfungsi untuk saya:

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

Yang menghasilkan tombol input file berikut:

Serius, periksa http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

Contoh kerja di sini dengan dukungan Drag and drop asli: https://jsfiddle.net/j40xvkb3/

Saat menata input file, Anda tidak boleh memutus interaksi asli apa pun yang disediakan input .

The display: nonePendekatan istirahat asli drag dan drop dukungan.

Untuk tidak merusak apa pun, Anda harus menggunakan opacity: 0pendekatan untuk input, dan posisikan menggunakan pola relatif / absolut dalam pembungkus.

Dengan menggunakan teknik ini, Anda dapat dengan mudah mendesain zona klik / jatuhkan untuk pengguna, dan menambahkan kelas khusus dalam javascript pada dragenteracara untuk memperbarui gaya dan memberikan umpan balik kepada pengguna untuk membuatnya melihat bahwa ia dapat menjatuhkan file.

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

Ini adalah contoh yang berfungsi (dengan JS tambahan untuk menangani dragoveracara dan menjatuhkan file).

https://jsfiddle.net/j40xvkb3/

Semoga ini bisa membantu!

Saya dapat melakukannya dengan CSS murni menggunakan kode di bawah ini. Saya telah menggunakan bootstrap dan font-mengagumkan.

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

Anda dapat membungkus input type = "file" di dalam label untuk input. Gaya label namun Anda ingin dan menyembunyikan input dengan tampilan: tidak ada;

Berikut adalah solusi yang tidak benar-benar menata <input type="file" />elemen tetapi menggunakan <input type="file" />elemen di atas elemen lainnya (yang dapat ditata). The <input type="file" />elemen tidak benar-benar terlihat karenanya, ilusi keseluruhan dari baik gaya control file upload.

Saya menemukan masalah ini baru-baru ini dan meskipun ada banyak jawaban di Stack Overflow, tidak ada yang benar-benar sesuai dengan tagihan. Pada akhirnya, saya akhirnya menyesuaikan ini sehingga memiliki solusi yang sederhana dan elegan.

Saya juga telah menguji ini di Firefox, IE (11, 10 & 9), Chrome dan Opera, iPad dan beberapa perangkat android.

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

Semoga ini membantu!!!

Ini sederhana dengan jquery. Untuk memberikan contoh kode saran Ryan dengan sedikit modifikasi.

Html dasar:

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

Pastikan untuk mengatur gaya pada input ketika Anda siap: opacity: 0 Anda tidak dapat mengatur display: nonekarena itu harus dapat diklik. Tetapi Anda dapat menempatkannya di bawah tombol "baru" atau memasukkan di bawah sesuatu yang lain dengan indeks-z jika Anda mau.

Siapkan beberapa jquery untuk mengklik input nyata ketika Anda mengklik gambar.

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

Sekarang tombol Anda berfungsi. Cukup potong dan tempel nilai saat diubah.

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

Tah dah! Anda mungkin perlu mengurai val () ke sesuatu yang lebih bermakna tetapi Anda harus siap.

Letakkan tombol unggah file di atas tombol atau elemen Anda yang bagus dan sembunyikan.

Sangat sederhana dan akan berfungsi di browser apa pun

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

Gaya

.upload-wrap {
    position: relative;
}

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

Visibilitas: TRIK tersembunyi

Saya biasanya melakukan visibility:hiddentrik

ini adalah tombol gaya saya

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

ini adalah tipe input = tombol file. Perhatikan visibility:hiddenaturannya

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

ini adalah bit JavaScript untuk merekatkan keduanya. Berhasil

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

satu-satunya cara yang bisa saya pikirkan adalah menemukan tombol dengan javascript setelah itu diberikan dan menetapkan gaya untuk itu

Anda mungkin juga melihat luncuran ini

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

Saya biasanya menggunakan javascript sederhana untuk menyesuaikan tag input file. Bidang input tersembunyi, pada klik tombol, javascript memanggil bidang tersembunyi, solusi sederhana tanpa css atau sekelompok jquery.

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

Di sini kami menggunakan rentang untuk memicu input file jenis dan kami hanya menyesuaikan rentang itu , sehingga kami dapat menambahkan gaya apa pun menggunakan cara ini.

Perhatikan bahwa kami menggunakan tag input dengan visibilitas: opsi tersembunyi dan memicunya dalam rentang.

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

Referensi

Ini adalah cara yang bagus untuk melakukannya dengan mengunggah file materi / sudut. Anda dapat melakukan hal yang sama dengan tombol bootstrap.

Catatan yang saya gunakan <a>sebagai gantinya <button>ini memungkinkan acara klik untuk muncul.

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

HANYA CSS

Gunakan ini sangat sederhana dan MUDAH

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

Mungkin banyak awnsers. Tapi saya suka ini dalam CSS murni dengan tombol-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"/>

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

Jangan tertipu oleh solusi "luar biasa" CSS saja yang sebenarnya sangat spesifik browser, atau yang overlay tombol gaya di atas tombol nyata, atau yang memaksa Anda untuk menggunakan <label>bukan<button> , atau hack lainnya . JavaScript diperlukan untuk membuatnya berfungsi untuk penggunaan umum. Silakan pelajari bagaimana gmail dan DropZone melakukannya jika Anda tidak percaya kepada saya.

Cukup gaya tombol normal seperti yang Anda inginkan, lalu panggil fungsi JS sederhana untuk membuat dan menautkan elemen input tersembunyi ke tombol gaya Anda.

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

Perhatikan bagaimana kode di atas menghubungkan kembali setelah setiap kali pengguna memilih file. Ini penting karena "onchange" hanya dipanggil jika pengguna mengubah nama file. Tetapi Anda mungkin ingin mendapatkan file setiap kali pengguna menyediakannya.

Solusi beberapa file dengan nama file yang dikonversi

CONTOH 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 dengan 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 tanpa 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;
  });
});

Berikut ini solusinya, yang juga menunjukkan nama file yang dipilih: 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; }

Minggu ini saya juga perlu menyesuaikan tombol dan menampilkan nama file yang dipilih selain itu, jadi setelah membaca beberapa jawaban di atas (Terima kasih BTW) saya datang dengan implementasi berikut:

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 (Sudut)

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

        $scope.fileName = 'No file chosen';

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

Pada dasarnya saya bekerja dengan ng-file-upload lib, Angular-wise Saya mengikat nama file ke $ lingkup saya dan memberikannya nilai awal dari 'Tidak ada file yang dipilih', saya juga mengikat fungsi onFileSelect () untuk lingkup saya jadi ketika file dipilih saya mendapatkan nama file menggunakan API ng-unggah dan tetapkan ke $ scope.filename.

Cukup mensimulasikan klik pada <input>dengan menggunakan trigger()fungsi saat mengklik pada gaya <div>. Saya membuat tombol sendiri dari a <div>dan kemudian memicu klik pada inputsaat mengklik saya <div>. Ini memungkinkan Anda membuat tombol sesuka Anda karena ini adalah <div>dan mensimulasikan klik pada file Anda <input>. Kemudian gunakan display: nonepada Anda <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");
});

Cara terbaik adalah menggunakan elemen pseudo: after atau: before sebagai elemen overt input de. Kemudian gaya elemen pseudo yang Anda inginkan. Saya merekomendasikan Anda untuk melakukan gaya umum untuk semua file input sebagai berikut:

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

Cara terbaik yang saya temukan adalah memiliki input type: filekemudian mengaturnya display: none. Berikan itu id. Buat tombol atau elemen lain yang ingin Anda buka input file.

Kemudian tambahkan pendengar acara di atasnya (tombol) yang ketika diklik mensimulasikan klik pada input file asli. Seperti mengklik tombol bernama halo tetapi membuka jendela file.

Kode contoh

//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 dapat melakukan banyak hal di sini ... dengan sedikit tipu daya ...

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

:: referensi :: http://site-o-matic.net/?viewpost=19

-biara

Saya telah menemukan metode yang sangat mudah untuk mengalihkan tombol file ke gambar. Anda cukup memberi label gambar dan meletakkannya di atas tombol file.

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

Saat mengklik pada gambar berlabel, Anda memilih tombol file.

Hanya pendekatan ini yang memberi Anda fleksibilitas penuh! 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();
});

Ini menyembunyikan tombol file input, tetapi di bawah tenda mengkliknya dari tombol normal lain, yang Anda dapat dengan jelas gaya seperti tombol lainnya. Ini adalah satu-satunya solusi tanpa kelemahan selain dari DOM-node yang tidak berguna. Berkat display:none;, tombol input tidak menyimpan ruang yang terlihat di DOM.

(Saya tidak tahu lagi kepada siapa harus memberikan alat peraga untuk ini. Tapi saya mendapat ide dari suatu tempat di sini di Stackoverflow.)