wake-up-neo.com

Stileingabetypdatei?

Ist es möglich, ein Eingabeelement des Typs file zu formatieren, ohne sich um die Browserkompatibilität zu kümmern? In meinem Fall muss ich ein Hintergrundbild und einen runden Rand (1px) implementieren. Die Schaltfläche sollte nach Möglichkeit auch angepasst werden.

htmlcssfileinputcross-browser
34
Banshee

Führen Sie die folgenden Schritte aus, um benutzerdefinierte Formatvorlagen für Ihr Dateiuploadformular zu erstellen:

1.) Dies ist das einfache HTML-Formular (bitte lesen Sie die HTML-Kommentare, die ich hier geschrieben habe)

    <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.) Verwenden Sie dann dieses einfache Skript, um das Klickereignis an das Dateieingabe-Tag zu übergeben.

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

Jetzt können Sie jede Art von Stil verwenden, ohne sich Gedanken darüber machen zu müssen, wie die Standardstile geändert werden sollen. Glauben Sie mir, es ist sehr schwer, da verschiedene Browser unterschiedliche Upload-Tags haben. Verwenden Sie dieses Formular, um Ihre benutzerdefinierten Dateiuploadformulare zu erstellen. Hier ist der vollständige AUTOMATISIERTE UPLOAD-Code.

<html>
<style>
#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;
  }
</style>
<script type="text/javascript">
 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();
  }
</script>
<body>
<center>
<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>
</center>
</body>
</html>
29
teshguru

Gleiche Lösung über Jquery. Funktioniert, wenn Sie mehr als eine Dateieingabe auf der Seite haben.

$j(".filebutton").click(function() {
    var input = $j(this).next().find('input');
    input.click();
});

$j(".fileinput").change(function(){

    var file = $j(this).val();
    var fileName = file.split("\\");
    var pai =$j(this).parent().parent().prev();
    pai.html(fileName[fileName.length-1]);
    event.preventDefault();
});
8
Iris

Hier ist eine einfache Nur-Lösung-Lösung, die einen konsistenten Zielbereich erstellt und Sie Ihre Faux-Elemente nach Ihren Wünschen gestalten kann. 

Die Grundidee lautet:

  1. Haben Sie zwei "falsche" Elemente (eine Texteingabe/einen Link) als gleichgeordnete Elemente für Ihre echte Dateieingabe. Stellen Sie sie absolut auf, so dass sie sich genau auf Ihrem Zielbereich befinden.
  2. Wickeln Sie Ihre Dateieingabe mit einem div. Setzen Sie den Überlauf auf ausgeblendet (damit die Dateieingabe nicht überläuft), und legen Sie genau die Größe fest, die Ihr Zielbereich haben soll.
  3. Setzen Sie die Deckkraft bei der Dateieingabe auf 0, damit sie ausgeblendet, aber noch anklickbar ist. Vergeben Sie eine große Schriftgröße, damit Sie auf alle Bereiche des Zielbereichs klicken können.

Hier ist das jsfiddle: http://jsfiddle.net/gwwar/nFLKU/

<form>
    <input id="faux" type="text" placeholder="Upload a file from your computer" />
    <a href="#" id="browse">Browse </a>
    <div id="wrapper">
        <input id="input" size="100" type="file" />
    </div>
</form>
3
Kerry Liu

Nachdem ich mich lange bei Google umgesehen und verschiedene Lösungen ausprobiert hatte (CSS, JavaScript und JQuery), stellte ich fest, dass die meisten von ihnen ein Bild als Schaltfläche verwendeten. Einige von ihnen waren schwer zu benutzen, aber ich schaffte es, etwas zusammenzustellen, das für mich ausging.

Das Wichtigste für mich war:

  • Der Durchsuchen-Button musste ein Button sein (kein Bild).
  • Der Button musste einen Hover-Effekt haben (damit er schön aussieht).
  • Die Breite sowohl des Textes als auch der Schaltfläche musste einfach angepasst werden können.
  • Die Lösung musste in IE8, FF, Chrome und Safari funktionieren.

Dies ist die Lösung, die ich mir ausgedacht habe. Und ich hoffe, es kann auch für andere von Nutzen sein.

Ändern Sie die Breite von .file_input_textbox, um die Breite des Textfelds zu ändern.

Ändern Sie die Breite von .file_input_div, .file_input_button und .file_input_button_hover, um die Breite der Schaltfläche zu ändern. Möglicherweise müssen Sie auch die Positionen ein wenig anpassen. Ich habe nie herausgefunden, warum ...

Erstellen Sie zum Testen dieser Lösung eine neue HTML-Datei, und fügen Sie den Inhalt ein.

<html>
<head>

<style type="text/css">

.file_input_textbox {height:25px;width:200px;float:left; }
.file_input_div     {position: relative;width:80px;height:26px;overflow: hidden; }
.file_input_button  {width: 80px;position:absolute;top:0px;
                     border:1px solid #F0F0EE;padding:2px 8px 2px 8px; font-weight:bold; height:25px; margin:0px; margin-right:5px; }
.file_input_button_hover{width:80px;position:absolute;top:0px;
                     border:1px solid #0A246A; background-color:#B2BBD0;padding:2px 8px 2px 8px; height:25px; margin:0px; font-weight:bold; margin-right:5px; }
.file_input_hidden  {font-size:45px;position:absolute;right:0px;top:0px;cursor:pointer;
                     opacity:0;filter:alpha(opacity=0);-ms-filter:"alpha(opacity=0)";-khtml-opacity:0;-moz-opacity:0; }
</style>
</head>
<body>
    <input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
 <div class="file_input_div">
  <input id="fileInputButton" type="button" value="Browse" class="file_input_button" />
  <input type="file" class="file_input_hidden" 
      onchange="javascript: document.getElementById('fileName').value = this.value" 
      onmouseover="document.getElementById('fileInputButton').className='file_input_button_hover';"
      onmouseout="document.getElementById('fileInputButton').className='file_input_button';" />
</div>
</body>
</html>
3
Jonas Mølgaard

Verwenden Sie die Clip-Eigenschaft zusammen mit Deckkraft, Z-Index, absoluter Positionierung und einigen Browserfiltern, um die Dateieingabe über der gewünschten Schaltfläche zu platzieren:

http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Clipping

1
Paul Sweatte

verwenden Sie uniform js plugin, um die Eingabe eines beliebigen Typs zu gestalten.

Die URL lautet http://uniformjs.com/

0
Hassaan