Bir giriş type="file"düğmesini nasıl şekillendirirsiniz?

Çoğu tarayıcı görünümü CSS veya javascript'ten değiştirmeyeceğinden, stil dosyası girişleri çok zordur.

Girişin boyutu bile aşağıdakilere benzer:

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

Bunun yerine, size boyut özelliğini kullanmanız gerekir:

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

Bundan daha sofistike olan herhangi bir stil için (örneğin göz atma düğmesinin görünümünü değiştirme), yerel dosya girişinin üstünde bir stil düğmesi ve giriş kutusu yerleştirmenin hileli yaklaşımına bakmanız gerekir. Zaten en rm tarafından bahsedilen makalede www.quirksmode.org/dom/inputfile.html gördüğüm en iyi biridir.

GÜNCELLEME

Bir <input>etiketi doğrudan biçimlendirmek zor olsa da , bir <label>etiket yardımıyla bu kolayca mümkündür . @JoshCrozier'den aşağıdaki cevaba bakın: https://stackoverflow.com/a/25825731/10128619

Bunun için JavaScript'e ihtiyacınız yok! İşte çapraz tarayıcı çözümü:

Bu örneğe bakın! - Chrome / FF / IE'de çalışır - (IE10 / 9/8/7)

En iyi yaklaşım, gizli bir dosya girdi öğesine foreklenmiş bir özelliğe sahip özel bir etiket elemanına sahip olmaktır . (Bunun çalışması için etiketin özniteliği dosya öğesinin özellikleriyle eşleşmelidir ).forid

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

Alternatif olarak, dosya giriş öğesini doğrudan bir etiketle de sarabilirsiniz: (örnek)

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

Stil açısından , nitelik seçiciyi kullanarak giriş elemanını ¹ gizleyin .

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

Sonra tek yapmanız gereken özel labelöğeyi biçimlendirmektir. (örnek) .

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

¹ - Elemanı kullanarak gizlerseniz, display: noneIE8 ve altında çalışmaz. Ayrıca, jQuery validate'ın gizli alanları varsayılan olarak doğrulamadığını unutmayın. Bunlardan herhangi biri sizin için sorunsa, bu koşullarda çalışan girdiyi ( 1 , 2 ) gizlemek için iki farklı yöntem vardır .

aşağıdaki adımları izleyin, ardından dosya yükleme formunuz için özel stiller oluşturabilirsiniz:

1. bu basit HTML formudur (lütfen aşağıda yazdığım HTML yorumlarını okuyun)

   <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. ardından click olayını dosya giriş etiketine geçirmek için bu basit komut dosyasını kullanın.

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

   Artık varsayılan stilleri nasıl değiştireceğiniz konusunda endişelenmeden her türlü stili kullanabilirsiniz.

Bunu çok iyi biliyorum, çünkü bir buçuk aydır varsayılan stilleri değiştirmeye çalışıyorum. İnan bana, bu çok zor çünkü farklı tarayıcıların farklı yükleme giriş etiketi var. Özel dosya yükleme formlarınızı oluşturmak için bunu kullanın. İşte tam OTOMATİK YÜKLEME kodu.

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 ile gizleyin ve göz at düğmesini etkinleştirmek için $ (selector) .click () ile özel bir düğme kullanın. daha sonra dosya giriş türünün değerini kontrol etmek için bir aralık ayarlayın. aralık kullanıcının değerini görüntüleyebilir, böylece kullanıcı neyin yüklendiğini görebilir. form gönderildiğinde aralık temizlenecek [EDIT] Çok meşgul olduğum için üzgünüm, bu gönderiyi güncellemenin anlamı, işte bir örnek

<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

Keman : http://jsfiddle.net/M7BXC/

Normal JavaScript ile jQuery olmadan da hedeflerinize ulaşabilirsiniz.

Şimdi newBtn, html_btn ile bağlantılıdır ve yeni btn'nizi istediğiniz gibi şekillendirebilirsiniz: D

Tüm oluşturma motorları, bir oluşturulduğunda otomatik olarak bir düğme <input type="file">oluşturur. Tarihsel olarak, bu düğme tamamen şekillenmemişti. Ancak Trident ve WebKit, sözde elemanlar aracılığıyla kancalar ekledi.

üç dişli mızrak

IE10'dan itibaren, dosya giriş düğmesi ::-ms-browsesözde eleman kullanılarak şekillendirilebilir . Temel olarak, normal bir düğmeye uyguladığınız tüm CSS kuralları sözde öğeye uygulanabilir. Örneğin:

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

<input type="file">

Bu, Windows 8'deki IE10'da aşağıdaki gibi görüntülenir:

Webkit

WebKit, ::-webkit-file-upload-buttonsözde elemanlı dosya giriş düğmesi için bir kanca sağlar . Yine, hemen hemen her CSS kuralı uygulanabilir, bu nedenle Trident örneği burada da çalışacaktır:

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

<input type="file">

Bu, OS X üzerinde Chrome 26'da aşağıdaki gibi görüntülenir:

Bootstrap 3 kullanıyorsanız, bu benim için çalıştı:

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

Hangi aşağıdaki dosya giriş düğmesini üretir:

Cidden, http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/ adresine bakın.

Yerel Sürükle ve Bırak desteğiyle çalışma örneği: https://jsfiddle.net/j40xvkb3/

Bir dosya girişini şekillendirirken , girişin sağladığı yerel etkileşimi bozmamalısınız .

display: noneYaklaşım yerli sürükle ve bırak desteği kırar.

Hiçbir şeyi opacity: 0kırmamak için, giriş için yaklaşımı kullanmalı ve bir sargıda göreli / mutlak desen kullanarak konumlandırmalısınız.

Bu tekniği kullanarak, kullanıcı için bir tıklama / bırakma bölgesine kolayca stil uygulayabilir ve dragenterstilleri güncellemek ve kullanıcıya bir dosyayı bırakabileceğini görmesi için kullanıcıya geri bildirimde bulunmak için javascript'e özel sınıf ekleyebilirsiniz .

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

İşte çalışan bir örnek ( dragoverolayı ve bırakılan dosyaları işlemek için ek JS ile ).

https://jsfiddle.net/j40xvkb3/

Umarım bu yardımcı oldu!

Aşağıdaki kodu kullanarak saf CSS ile yapabilirim . Bootstrap ve font-awesome kullandım.

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

Girdi için bir etiketin içine input type = "file" yazabilirsiniz. Etiketi istediğiniz gibi biçimlendirin ve girişi display ile gizleyin: none;

Burada, <input type="file" />öğeyi gerçekten şekillendirmeyen, bunun yerine <input type="file" />diğer öğelerin üstünde (stilize edilebilen) bir öğe kullanan bir çözüm var . <input type="file" />Eleman dolayısıyla gerçekten görünmüyorsa, genel yanılsama bir güzel tarz dosya yükleme kontrolün olduğunu.

Son zamanlarda bu sorunla karşılaştım ve Stack Overflow'daki cevapların bolluğuna rağmen, hiçbiri gerçekten faturaya uymuyor gibiydi. Sonunda, basit ve zarif bir çözüm elde etmek için bunu özelleştirdim.

Bunu Firefox, IE (11, 10 ve 9), Chrome ve Opera, iPad ve birkaç android cihazda da test ettim.

İşte JSFiddle bağlantısı -> 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>

Bu yardımcı olur umarım!!!

Bu jquery ile basit. Ryan'ın önerisinde küçük bir değişiklikle kod örneği vermek .

Temel HTML:

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

Hazır olduğunuzda stili stil üzerinde ayarladığınızdan emin olun: Tıklanabilir olması gerektiği için opacity: 0 ayarlayamazsınız display: none. Ancak bunu "yeni" düğmesinin altına yerleştirebilir veya isterseniz z-endeksi ile başka bir şeyin altına yerleştirebilirsiniz.

Görüntüyü tıklattığınızda gerçek girdiyi tıklatmak için bazı jquery ayarlayın.

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

Şimdi düğmeniz çalışıyor. Değiştirildiğinde değeri kesin ve yapıştırın.

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

Tah dah! Val () yöntemini daha anlamlı bir şeyle ayrıştırmanız gerekebilir, ancak hepiniz ayarlanmış olmalısınız.

Karşıya yükleme dosyası düğmesini güzel düğmenizin veya öğenizin üzerine koyun ve gizleyin.

Çok basit ve herhangi bir tarayıcıda çalışacak

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

stiller

.upload-wrap {
    position: relative;
}

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

GÖRÜNÜRLÜK: gizli TRICK

Genellikle visibility:hiddenhile için giderim

bu benim tarz düğmem

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

bu girdi tipi = dosya düğmesidir. Not visibility:hiddenkuralı

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

Bu, onları birleştirmek için JavaScript bitidir. İşe yarıyor

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

düşünebildiğim tek yol, oluşturulduktan sonra javascript ile düğmeyi bulmak ve ona bir stil atamaktır

bu yazıya da bakabilirsiniz

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

Normalde dosya giriş etiketini özelleştirmek için basit javascript kullanırdım.Gizli bir giriş alanı, düğmeyi tıklatarak, javascript gizli alanı çağırır, herhangi bir css veya jquery grubu ile basit bir çözüm.

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

Burada tip dosyasının girişini tetiklemek için bir span kullanıyoruz ve sadece bu span'ı özelleştirdik , böylece bu yolu kullanarak herhangi bir stil ekleyebiliriz.

Not gizli seçeneği ve yayılma alanına tetikler: Biz görünürlük ile giriş etiketini kullanın söyledi.

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

Referans

Bu, malzeme / açısal dosya yükleme ile bunu yapmanın güzel bir yoludur. Aynı şeyi bir bootstrap düğmesiyle de yapabilirsiniz.

<a>Bunun yerine kullandığım <button>tıklama etkinliklerinin kabarmasını sağlar.

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

SADECE CSS

Bunu çok basit ve KOLAY kullanın

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

Belki bir sürü utanç verici. Ama fa-düğmeleri ile saf CSS bunu beğendim:

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

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

Aslında çok tarayıcıya özgü olan veya gerçek düğmenin üstündeki stil düğmesinin üzerine bindirilen veya sizi <label>bir <button>veya benzeri bir hack yerine kullanmaya zorlayan "harika" CSS'ye özel çözümlere aldanmayın. . Genel kullanım için çalışmasını sağlamak için JavaScript gereklidir. Bana inanmıyorsanız lütfen gmail ve DropZone'un bunu nasıl yaptığını inceleyin.

İstediğiniz gibi normal bir düğmeye stil verin, ardından gizli bir giriş öğesi oluşturmak ve stil düğmenize bağlamak için basit bir JS işlevini çağırı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>

Kullanıcı her dosya seçtikten sonra yukarıdaki kodun nasıl yeniden bağlandığına dikkat edin. Bu önemlidir çünkü "onchange" sadece kullanıcı dosya adını değiştirirse çağrılır. Ancak muhtemelen kullanıcı her sağladığında dosyayı almak istersiniz.

Dönüştürülmüş dosya adına sahip çoklu dosya çözümü

Önyükleme ÖRNEĞİ

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. jQuery ile JS:

$().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. jQuery olmadan JS

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

İşte seçilen dosya adını da gösteren bir çözüm: 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; }

Bu hafta ayrıca düğmeyi özelleştirmek ve seçilen dosya adını bir kenara görüntülemek zorunda kaldım, bu yüzden yukarıdaki cevapların bazılarını okuduktan sonra (Teşekkürler BTW) aşağıdaki uygulamaya geldim:

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 (Açısal)

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

        $scope.fileName = 'No file chosen';

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

Temelde ng-file-upload lib ile çalışıyorum, Angular-wise Ben dosya adı $ kapsamına bağlama ve 'Hiçbir dosya seçildi' ilk değerini vererek, ben de onFileSelect () işlevini bağlama benim kapsam böylece dosya seçildiğinde ng-upload API kullanarak dosya adı alıyorum ve $ scope.filename atayın.

Bir stile tıklarken işlevi <input>kullanarak bir tıklamayı basitçe simüle edin . Ben dışarı benim kendi düğme oluşturduk ve sonra üzerine tıklamayı tetiklediği gözlerimi tıklandığında . Bu, düğmenizi istediğiniz gibi oluşturmanıza olanak tanır, çünkü bu bir adır ve dosyanızda bir tıklamayı simüle eder . Sonra kullanmak Aşağıdaki yerlerde de .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");
});

En iyi yol pseudo elementini kullanmaktır: after veya: before, de girişi aşan bir eleman olarak. Sonra sözde elemanı istediğiniz gibi biçimlendirin. Aşağıdaki gibi tüm girdi dosyaları için genel bir stil olarak yapmanızı tavsiye ederim:

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

Bulduğum en iyi yol, daha input type: filesonra ayarını yapmaktır display: none. Bir verin id. Dosya girişini açmak istediğiniz bir düğme veya başka bir öğe oluşturun.

Ardından üzerine tıklandığında orijinal dosya girişine tıklamayı simüle eden bir olay dinleyicisi ekleyin (düğme). Merhaba adlı bir düğmeyi tıklatmak gibi ama bir dosya penceresi açar.

Örnek kod

//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 burada çok şey yapabilir ... küçük bir hile ile ...

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

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

-abbey

Dosya düğmesini bir resme geçirmek için çok kolay bir yöntem buldum. Sadece bir resmi etiketleyin ve dosya düğmesinin üstüne yerleştirin.

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

Etiketli görüntüyü tıkladığınızda dosya düğmesini seçersiniz.

Sadece bu yaklaşım size tüm esnekliği sağlar! ES6 / Vanilya JS!

html:

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

javascript:

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

Bu, giriş dosyası düğmesini gizler, ancak kaputun altında başka bir normal düğmeden tıklar ve açıkça diğer düğmeler gibi stil uygulayabilirsiniz. Bu, işe yaramaz bir DOM düğümünden başka dezavantajı olmayan tek çözümdür. Teşekkür etmek display:none;, girdi düğmeli DOM görünür herhangi alanı ayırmaz.

(Artık kime bunun için destek vereceğimi bilmiyorum. Ama bu fikri Stackoverflow'da bir yerden aldım.)