Cum se personalizează ? (Programare, Html, Css, Încărcare Fișiere, Intrare)

Newbie Coder a intrebat.

Este posibil să se schimbe aspectul <input type="file">?

Comentarii

  • Motivul pentru care câmpul de text este acolo este pentru că arată utilizatorului calea fișierului după ce acesta navighează și selectează fișierul. –  > Por k la z.
  • Oooppss… se pare că acesta este modul în care Firefox gestionează acest lucru… –  > Por Codificator începător.
  • Ca să fie clar, chiar și după ce navighează după fișier, tot trebuie să trimită formularul cu un buton de trimitere a formularului. –  > Por k to the z.
18 răspunsuri
alex

Nu puteți modifica prea multe despre input[type=file] control în sine.

Din moment ce se face clic pe un label corect cuplat cu un input îl va activa/focaliza, putem folosi un element label pentru a declanșa dialogul de navigare al sistemului de operare.

Iată cum puteți face acest lucru…

CSS-ul pentru controlul formularului va face ca acesta să apară invizibil și să nu ocupe spațiu în aspectul documentului, dar va fi totuși exista astfel încât să poată fi activat prin intermediul butonului label.

Dacă doriți să afișați calea aleasă de utilizator după selecție, puteți asculta change eveniment cu JavaScript și apoi să citiți calea pe care browserul v-o pune la dispoziție (din motive de securitate, aceasta poate minciună cu privire la calea exactă). O modalitate de a face acest lucru mai plăcut pentru utilizatorul final este de a utiliza pur și simplu numele de bază al căii returnate (astfel încât utilizatorul să vadă pur și simplu numele de fișier ales).

Există o funcție ghid excelent realizat de Tympanus pentru a stiliza acest lucru.

Comentarii

  • Cred că acestea sunt stiluri mai bune, având în vedere că scopul nostru este ca dialogul de selectare a fișierelor să fie deschis prin clic oriunde pe container: #container { position: relative; width: ...px; height: ...px; overflow: hidden; } #input { position: absolute; right: 0; font-size: <many a>px; opacity: 0; margin: 0; padding: 0; border: none; } –  > Por x-yuri.
  • Folosind <label> (așa cum arată Tympanus) este mult mai semantică și mai puțin hacky. De asemenea, această întrebare a fost pusă din nou câțiva ani mai târziu și are răspunsuri mult mai bune acolo: styling personalizat cross-browser pentru butonul de încărcare a fișierelor. –  > Por Dan Dăscălescu.
  • @DanDascalescu Sunt de acord, dacă îmi amintesc bine (prin 2011) avea probleme cu IE, probabil 6 sau 7. Voi edita acest răspuns pentru a-l aduce în viitor acum. –  > Por alex.
  • De ce ar fi mai bine să folosești label? Nu se pot tabula etichete, în plus, un buton mi se pare mai logic decât o etichetă pentru a activa un dialog. –  > Por Louis-Marie Matthews.
  • @alex, Nu se afișează numele fișierului. –  > Por Naren Verma.
Konservin

Ceva de genul ăsta poate?

<form>
  <input id="fileinput" type="file" style="display:none;"/>
</form>
<button id="falseinput">El Cucaratcha, for example</button>
<span id="selected_filename">No file selected</span>

<script>
$(document).ready( function() {
  $('#falseinput').click(function(){
    $("#fileinput").click();
  });
});
$('#fileinput').change(function() {
  $('#selected_filename').text($('#fileinput')[0].files[0].name);
});

</script>

Comentarii

  • În acest caz, ie 9 nu va permite trimiterea formularului la iframe. –  > Por x-yuri.
  • @x-yuri ce vrei să spui? –  > Por Micaël Félix.
  • Din câte îmi amintesc, ie 9 (și probabil altele) nu va permite trimiterea formularului la iframe, deoarece utilizatorul nu a făcut clic pe fișierul de intrare. –  > Por x-yuri.
  • display: none va elimina inputul din ordinea de tabulare, ceea ce va face pagina mai puțin accesibilă. Folosind <label> (așa cum a arătat Tympanus) este mult mai semantică și mai puțin hacky. De asemenea, această întrebare a fost pusă din nou câțiva ani mai târziu și are răspunsuri mult mai bune acolo: stilizare personalizată cross-browser pentru butonul de încărcare a fișierelor. –  > Por Dan Dăscălescu.
  • corectat greșeala de închidere a parantezelor pătrate de închidere într-un selector, pentru a face codul să funcționeze cu adevărat – -.  > Por Constantin Groß.
jt3k
  <label for="fusk">dsfdsfsd</label>
  <input id="fusk" type="file" name="photo" style="display: none;">

de ce nu? ^_^

Vezi exemplul aici

Comentarii

  • @InakiIbarrolaAtxa puteți furniza date care să susțină acest lucru? –  > Por Ben Leggiero.
  • Nu stilizează nimic în Chrome 51. Utilizând <label> (după cum arată Tympanus) este o soluție corectă din punct de vedere semantic. De asemenea, această întrebare a fost pusă din nou câțiva ani mai târziu și are răspunsuri mult mai bune acolo: stilizare personalizată cross-browser pentru butonul de încărcare a fișierelor. –  > Por Dan Dăscălescu.
Ouadie

Dacă folosiți bootstrap iată o soluție mai bună :

<label class="btn btn-default btn-file">
    Browse <input type="file" style="display: none;" required>
</label>

Pentru IE8 și mai jos http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

Sursa : https://stackoverflow.com/a/18164555/625952

Comentarii

  • Am avut o mulțime de probleme cu acest lucru, folosind bootstrap. Pe telefon, formularul se trimitea ori de câte ori dădeam click pe căpușa care completa fotografia, fără fotografie, , în loc să aștepte butonul de trimitere. În prezent am: <label class="btn btn-default btn-file"> <input onchange="alert('Please check picture is OK')"; type="file" required> </label>și ceva javascript pentru a verifica câmpurile obligatorii, ca în exemplele bootstrap. –  > Por Hugh Barnard.
caden311

Cel mai simplu mod…

<label>
     Upload
    <input type="file" style="visibility: hidden;"/>
</label>

Comentarii

  • cu style="display:none;" este mult mai bine decât vizibilitatea:hidden –  > Por medBouzid.
Juri Karasjov

în primul rând este un container:

<div class="upload_file_container">
    Select file!
    <input type="file" name="photo" />
</div>

În al doilea rând, este un stil CSS, dacă doriți să real mai multe personalizare, doar țineți ochii este deschis 🙂

.upload_file_container{
   width:100px;
   height:40px;
   position:relative;
   background(your img);
}

.upload_file_container input{
   width:100px;
   height:40px;
   position:absolute;
   left:0;
   top:0;
   cursor:pointer;
}

Acest exemplu nu are stil pentru textul din interiorul butonului, depinde de font-size, doar corectați valorile de înălțime și padding-top pentru container

Comentarii

  • Mă întreb de ce nu-l faci tu right: 0, , în loc de left: 0? În acest fel ai avea caseta de text ie în afara containerului. Dând click pe caseta de text nu se deschide dialogul select file. De asemenea, cred că dacă faci fișierul de intrare mare cu font-size este o idee mult mai bună decât să folosești width și height. –  > Por x-yuri.
Christopher Reid

În webkit puteți încerca acest lucru…

input[type="file"]::-webkit-file-upload-button{
   /* style goes here */
}

Comentarii

  • cunoașteți vreo soluție similară pentru firefox ? Există? ) –  > Por Artem Z..
drinor

Trucul este să ascundeți intrarea și să personalizați eticheta.

HTML:

<div class="inputfile-box">
  <input type="file" id="file" class="inputfile" onchange='uploadFile(this)'>
  <label for="file">
    <span id="file-name" class="file-box"></span>
    <span class="file-button">
      <i class="fa fa-upload" aria-hidden="true"></i>
      Select File
    </span>
  </label>
</div>

CSS:

.inputfile-box {
  position: relative;
}

.inputfile {
  display: none;
}

.container {
  display: inline-block;
  width: 100%;
}

.file-box {
  display: inline-block;
  width: 100%;
  border: 1px solid;
  padding: 5px 0px 5px 5px;
  box-sizing: border-box;
  height: calc(2rem - 2px);
}

.file-button {
  background: red;
  padding: 5px;
  position: absolute;
  border: 1px solid;
  top: 0px;
  right: 0px;
}

JS:

function uploadFile(target) {
    document.getElementById("file-name").innerHTML = target.files[0].name;
}

Puteți verifica acest exemplu: https://jsfiddle.net/rjurado/hnf0zhy1/4/

Bogdan M.

Este mult mai bine dacă folosești doar un <label>, , ascundeți <input>, , și să personalizezi eticheta.

HTML:

<input type="file" id="input">
<label for="input" id="label">Choose File</label>

CSS:

input#input{
    display: none;
}
label#label{
    /* Customize your label here */
}

Comentarii

  • display: none va elimina elementul din ordinea de tabulare. Utilizarea <label> (după cum arată Tympanus) este modalitatea corectă din punct de vedere semantic, dar are nevoie de unele îmbunătățiri. De asemenea, această întrebare a fost pusă din nou câțiva ani mai târziu și are răspunsuri mult mai bune acolo: stilizare personalizată cross-browser pentru butonul de încărcare a fișierelor. –  > Por Dan Dăscălescu.
saghar.fadaei

pentru a afișa calea fișierului selectat puteți încerca asta pe html :

<div class="fileinputs">
    <input type="file" class="file">
</div>

și în javascript :

        var fakeFileUpload = document.createElement('div');
        fakeFileUpload.className = 'fakefile';
        var image = document.createElement('div');
        image.className='fakebtn';
        image.innerHTML = 'browse';
        fakeFileUpload.appendChild(image);
        fakeFileUpload.appendChild(document.createElement('input'));
        var x = document.getElementsByTagName('input');
        for (var i=0;i<x.length;i++) {
            if (x[i].type != 'file') continue;
            if (x[i].parentNode.className != 'fileinputs') continue;
            x[i].className = 'file hidden';
            var clone = fakeFileUpload.cloneNode(true);
            x[i].parentNode.appendChild(clone);
            x[i].relatedElement = clone.getElementsByTagName('input')[0];
            x[i].onchange = x[i].onmouseout = function () {
                this.relatedElement.value = this.value;
            }
        }

și în stil :

div.fileinputs {
    position: relative;
    height: 30px;
    width: 370px;
}
input.file.hidden {
    position: relative;
    text-align: right;
    -moz-opacity: 0;
    filter: alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}
div.fakefile {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0;
    width: 370px;
    padding: 0;
    margin: 0;
    z-index: 1;
    line-height: 90%;
}
div.fakefile input {
    margin-bottom: 5px;
    margin-left: 0;
    border: none;
    box-shadow: 0px 0px 2px 1px #ccc;
    padding: 4px;
    width: 241px;
    height: 20px;
}
div.fakefile .fakebtn{
    width: 150px;
    background: #eb5a41;
    z-index: 10;
    font-family: roya-bold;
    border: none;
    padding: 5px 15px;
    font-size: 18px;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
    display: inline;
    margin-left: 3px;
}
div.fileinputs input[type="file"]:hover + div .fakebtn{
    background: #DA472E;
}

div.fileinputs input[type="file"] {
    opacity: 0;
    position: absolute;
    top: -6px;
    right: 0px;
    z-index: 20;
    width: 102px;
    height: 40px;
    cursor: pointer;
}

juliankmazo

Exemplu de bootstrap

<label className="btn btn-info btn-lg">
  Upload
  <input type="file" style="display: none" />
</label>

Vanja

Iată un mod care îmi place pentru că face ca inputul să umple tot containerul. Șmecheria este „font-size: 100px”, și trebuie să meargă cu „overflow: hidden” și poziția relativă.

<div id="upload-file-container" >
   <input type="file" />
</div>

#upload-file-container {
   width: 200px;
   height: 50px;
   position: relative;
   border: dashed 1px black;
   overflow: hidden;
}

#upload-file-container input[type="file"]
{
   margin: 0;
   opacity: 0;   
   font-size: 100px;
}

Comentarii

  • Este logic să o faci position: absolute; right: 0; font-size: <many>px; –  > Por x-yuri.
Emi-C

Am optat pentru această opțiune care clarifică modul de personalizare completă a butonului de răsfoire prin includerea unui handler al numelui fișierului încărcat, de asemenea personalizat. adaugă câmpuri suplimentare și controale client-side pe ele doar pentru a arăta cum să includă răsfoirea într-un formular „real”, nu doar un standalone.

Aici este codepen-ul: http://codepen.io/emiemi/pen/zxNXWR

JS:

//click on our custom btn triggers a click on the hidden actual file input 
$("#btnup").click(function(){
   $("#fileup").click();    
});


//changes on the three fields (input, tit,and name) trigger a control which checks if the 3 fields are all filled and if file field is valid (an image is uploaded)
$('#fileup').change(function(){
    var formDOMObj = document.upload;
//here we assign tu our text field #fileup the name of the selected file  
    var res=$('#fileup').val();
    var arr = res.split("\");
//if file is not valid we show the error icon and the red alert
    if (formDOMObj.fileup.value.indexOf(".jpg") == -1 && formDOMObj.fileup.value.indexOf(".png") == -1 &&  formDOMObj.fileup.value.indexOf(".jpeg") == -1 && formDOMObj.fileup.value.indexOf(".bmp") == -1 && formDOMObj.fileup.value.indexOf(".JPG") == -1 && formDOMObj.fileup.value.indexOf(".PNG") == -1 &&  formDOMObj.fileup.value.indexOf(".JPEG") == -1 && formDOMObj.fileup.value.indexOf(".BMP") == -1){
        $( ".imgupload" ).hide("slow"); 
        $( ".imguploadok" ).hide("slow");   
        $( ".imguploadstop" ).show("slow");
        $('#nomefile').css({"color":"red","font-weight":700});
        $('#nomefile').html("The file "+arr.slice(-1)[0]+" is not an image!");
        $( "#bottone" ).hide();
        $( "#fakebtn" ).show();
    }else{
 //if file is valid we show the green alert
    $( ".imgupload" ).hide("slow");
    $( ".imguploadstop" ).hide("slow");
    $( ".imguploadok" ).show("slow");
    $('#nomefile').html(arr.slice(-1)[0]);
    $('#nomefile').css({"color":"green","font-weight":700});
    if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
  //if all three fields are valid the fake input btn is hidden and the actual one i s finally hown
        $( "#fakebtn" ).hide();
        $( "#bottone" ).show();
    }
    }
});


$('#nome').change(function(){
//same as file change but on name field
    var formDOMObj = document.upload;
    if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
        $( "#fakebtn" ).hide();
        $( "#bottone" ).show();
    }else{
        $( "#bottone" ).hide();
        $( "#fakebtn" ).show();
    }
});
$('#tit').change(function(){
 //same as file change but on tit field
    var formDOMObj = document.upload;
    if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
        $( "#fakebtn" ).hide();
        $( "#bottone" ).show();
    }else{
        $( "#bottone" ).hide();
        $( "#fakebtn" ).show();
    }
});

HTML:

<form name="upload" method="post" action="/" enctype="multipart/form-data" accept-charset="utf-8">
<div class="row">
  <div class="col-md-6 center">
<!--this is the actual file input, s hidden beacause we wanna use our custom one-->
    <input type="file" value="" class="hidden" name="fileup" id="fileup">
    <div class="btn-container">
<!--the three icons: default, ok file (img), error file (not an img)-->
      <h1 class="imgupload"><i class="fa fa-file-image-o"></i></h1>
      <h1 class="imguploadok"><i class="fa fa-check"></i></h1>
      <h1 class="imguploadstop"><i class="fa fa-times"></i></h1>
<!--this field changes dinamically displaying the filename we are trying to upload-->
      <p id="nomefile">Only pics allowed! (jpg,jpeg,bmp,png)</p>
<!--our custom btn which triggers the actual hidden one-->
      <button type="button" id="btnup" class="btn btn-primary btn-lg">Browse for your pic!</button>
    </div>
  </div>
<!--additional fields-->
  <div class="col-md-6">
    <div class="row">
      <div class="form-group" id="top">
        <div class="col-md-12">
          <input type="text" maxlength="100" class="form-control" name="nome" id="nome" placeholder="Your Name">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="form-group">
        <div class="col-md-12">
          <input type="text" maxlength="50" class="form-control" name="tit" id="tit" placeholder="I am rubber, you are glue">
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-8">
        <p class="white">All fields are mandatory</p>
      </div>
      <div class="col-md-4">
<!--the defauld disabled btn and the actual one shown only if the three fields are valid-->
        <input type="submit" value="Submit!" class="btn btn-primary" id="bottone" style="padding-left:50px; padding-right:50px; display:none;">
        <button type="button" class="btn btn-default" disabled="disabled" id="fakebtn"  style="padding-left:40px; padding-right:40px;">Submit! <i class="fa fa-minus-circle"></i></button>
      </div>
    </div>
  </div>
</div>

Irgend Son Hansel

Aici este o soluție rapidă de lucru pur CSS (funcționează pe Chrome și are inclusă o soluție de rezervă pentru FireFox), inclusiv numele fișierului, o etichetă și un buton de încărcare personalizat, face ceea ce ar trebui – nu este nevoie de JavaScript deloc!

Notă: ☝ Acest lucru funcționează pe Chrome și are un Fallback FireFox – oricum, nu l-aș folosi pe un site web din lumea reală – dacă compatibilitatea browserului este un lucru pentru tine (ceea ce ar trebui să fie). Așa că este mai mult un fel de experiment.

Ben Leggiero

Puteți să le stilizați, dar nu puteți elimina elementele care sunt deja acolo. Dacă ești creativ, poți să lucrezi cu ele și să faci ceva de genul acesta:

input[type=file] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #EEE;
    background: linear-gradient(to top, #FFF, #DDD);
    border: thin solid rgba(0,0,0, .5);
    border-radius: .25em;
    box-shadow: inset .25em .25em .25em rgba(255,255,255, .5), inset -.1em -.1em .1em rgba(0,0,0, 0.1);
    cursor: text;
    padding: .25em;
}

http://jsfiddle.net/zr1x1m2b/1/

Îți sugerez să te joci cu acest cod, să elimini linii, să adaugi propriile linii, să faci orice până când obții ceva care arată așa cum îți place!

Comentarii

  • Nu stilizează cuvintele „Choose a file”. Folosind <label> (așa cum a arătat Tympanus) este semantică și oferă o personalizare completă. De asemenea, această întrebare a fost pusă din nou câțiva ani mai târziu și are răspunsuri mult mai bune acolo: cross-browser custom styling for file upload button. –  > Por Dan Dăscălescu.
  • @DanDascalescu Aveți dreptate! Eu doar ofer o soluție pure-CSS, în cazul în care nu poți modifica HTML-ul cu configurația ta. –  > Por Ben Leggiero.
personal_cloud

Doar stilizați un buton normal cum doriți, folosind CSS-ul preferat.

Apoi, apelați o funcție JS simplă pentru a crea și a lega un element de intrare ascuns la butonul stilizat. Nu adăugați un CSS specific browserului pentru a face partea de ascundere.

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

Observați cum codul de mai sus îl reia după fiecare dată când utilizatorul alege un fișier. Acest lucru este important deoarece „onchange” este apelat doar dacă utilizatorul schimbă numele fișierului. Dar probabil că doriți să obțineți fișierul de fiecare dată când utilizatorul îl furnizează.

Pentru mai multe detalii, cercetați DropZone și încărcările prin gmail.

Milan Madubasha

Aceasta este încărcarea mea complet funcțională a fișierului / atașament clientizat folosind jquery &; javascript (Visual studio). Acest lucru va fi util !

Codul va fi disponibil la secțiunea de comentarii !

Link : https://youtu.be/It38OzMAeig

Bucurați-vă 🙂

Aakash

Iată o modalitate pe care am descoperit-o recent, cu puțin jQuery

Cod HTML:

<form action="">
    <input type="file" name="file_upload" style="display:none" id="myFile">

    <a onclick="fileUpload()"> Upload a file </a>
</form>

Pentru partea javascript/jQuery :

<script>
function fileUpload() {
    $("#myFile").click();
}
</script>

În acest exemplu, am pus un tag „ancoră” pentru a declanșa încărcarea fișierului. Puteți înlocui cu orice doriți, amintiți-vă doar să puneți atributul „onclick” cu funcția corespunzătoare.

Sper să vă fie de ajutor!

P.S. : Nu uitați să includeți jQuery din CDN sau din orice altă sursă

Comentarii

  • display: none va elimina intrarea din ordinea de tabulare. Folosind <label> (după cum arată Tympanus) este mult mai semantică și mai puțin hacky. De asemenea, această întrebare a fost pusă din nou câțiva ani mai târziu și are răspunsuri mult mai bune acolo: styling personalizat cross-browser pentru butonul de încărcare a fișierelor. –  > Por Dan Dăscălescu.
  • Aceasta este o idee bună! –  > Por Tiago Rangel de Sousa.