So passen Sie die input type file button und Textfeld

Muss ich anpassen, die Datei hochladen-Schaltfläche aus der Formular unten.

So passen Sie die input type file button und Textfeld

Nun meine fileupload-button sieht aus wie fileupload Bild.Ich muss es anpassen, wie anpassen-file upload image

<form id="myform" action="" enctype="multipart/form-data">

    <input id="tele" type="file" name="filename" />
    <br/>
    <input class="btn" type="submit" value="Upload" />
</form>
InformationsquelleAutor Rama Priya | 2013-12-21
  1. 6

    Nachdem ich dein Bild, ich denke, dass u wollen input geben, wie ein Textfeld, und nicht button.Können u versuchen zu halten, input type file als verborgen und haben textbox-wie dies

     <input id="txt" type = "text" value = "Choose File" 
       onclick ="javascript:document.getElementById('file').click();">
      <input id = "file" type="file" style='visibility: hidden;' name="img" onchange="ChangeText(this, 'txt');"/>



function ChangeText(oFileInput, sTargetID) {

    document.getElementById(sTargetID).value = oFileInput.value;
}

    Können Sie problemlos anwenden von css, um das Textfeld

    DEMO

    • Ja, es ist teilweise arbeiten.Was muss ich tun, um die Anzeige der hochgeladenen Datei Namen in das Feld text @ Nitin varpe
    • Siehe updates bitte
    • Es ist nicht in Ordnung.können Sie bitte aktualisieren die Geige mit diesem code@Nitin varpe
    • aber link ist aktualisiert und funktioniert
    • Seine arbeiten, aber ich bin immer der Dateiname zusammen mit dem Pfad(C:\fakepath\sample.docx) ich will einfach nur, um den Dateinamen zu zeigen@Nitin varpe
    • aber auf meiner Maschine die nur den Datei-Namen. ok, u substring verwenden, um die Letzte Zeichenkette nach \, sollte nicht sein problem
    • lassen Sie uns weiter, diese Diskussion im chat

    InformationsquelleAutor Nitin Varpe
  2. 1

    Geben, die Stile, die Sie wollen, natürlich, aber einige Beispiele, wie dies zu tun sind unten angegeben.

    input[type="file"] {
       border: 4px solid red;
       border-radius: 40px;
}

    oder versuchen

    #tele {
     border: 4px solid red;
     border-radius: 50px;
 }

    wenn für einige Grund keiner dieser funktioniert, müssen Sie möglicherweise, um genauer zu sein, wie so

    #myform #tele {
     border: 3px solid blue;
 }
    • oder .btn { auch..
    • Muss ich anpassen type="file" - Taste nicht auf "Absenden". @codehorse
    • <input type="file" ist nicht der "Knopf".. Es ist das input-text-Feld.
    • Ihr code wird nicht unterstützt, für meine Anforderung.Ich brauche zum anpassen der Schaltfläche browse oder choose file.können u-update im fiddle
    • Ich habe meinen Beitrag aktualisiert mit dem Bild nach meiner Anforderung.ich hoffe, dass jetzt können Sie in der Lage zu verstehen, meine question.@codehorse
    InformationsquelleAutor CRABOLO
  3. 0

    Können Sie background: url('image_url'); zum hinzufügen einer Schaltfläche Bild

    InformationsquelleAutor Manolo
  4. 0

    Um dieses Problem zu lösen Sie beilegen konnte die input - tag innerhalb eines label - und style-das label, die somit die overlay-Taste.

    InformationsquelleAutor mumush
Schreibe einen Kommentar