passen Sie die Datei-Schaltfläche für das Hochladen von Bildern

Ich bin eine Schaltfläche zum Hochladen von Bilddateien.Ich möchte diese Schaltfläche anpassen, ich möchte mehr als eine Bilddatei hinzufügen, was ist die Logik zu erreichen.passen Sie die Datei-Schaltfläche für das Hochladen von Bildern

<input type="file" />,this is rendering a choose button with a text saying `no files choosen` in the same line.

Ist es möglich, den Text „no files choosen“ unter dem choose button.Meanwile anpassen weise ich vor dem no files choosen Text ein Kamerabild zu halten.

So führen Sie dies aus, um meine Website zu verbessern.

Danke

Quelle

2013-04-18 Anonymous

Die ähnliche Position http://stackoverflow.com/questions/6461252/custom-upload-button – zavg

Sie die Eingabe verbergen kann platziere es in ein div welches 01 istund overwflow:hidden. Dann fügen Sie eine Schaltfläche oder ein anderes HTML-Element hinzu, das Sie wie gewünscht gestalten können. Im Onclick-Ereignis erhalten Sie das Eingabefeld es mit Javascript oder jQuery und klicken Sie auf:

<div style="height:0px;overflow:hidden"> 
    <input type="file" id="fileInput" name="fileInput" /> 
</div> 
<button type="button" onclick="chooseFile();">choose file</button> 

<script> 
    function chooseFile() { 
     $("#fileInput").click(); 
    } 
</script>

Nun wird der Eingang versteckt, aber Sie können auf die Schaltfläche Stil, wie Sie wollen, es wird immer die Datei Eingabe auf Klick öffnen.

Wenn Sie nicht wollen, jQuery verwenden, um den Script-Tag mit diesem Script-Tag ersetzen:

<script> 
    function chooseFile() { 
     document.getElementById("fileInput").click(); 
    } 
</script>

Quelle

2013-04-18 10:48:50

Hallo Sir, ich habe es mit jsfiddle überprüft, es nimmt nicht die Eingabedatei. Dateiauswahltaste tut nichts –

Ja, weil Sie Links zu th hinzufügen müssen e jQuery js-Dateien. –

Und Sie müssen das Javascript in ein Skript-Tag in das HTML-Panel, aber ich weiß nicht, warum ... Beim Versuch es Editor von w3schools gibt es gut. –

Versuchen Sie diese manipulierte Lösung. (Ich versuchte es heute für einen meiner Projekt :))

HTML

<div class="choose_file"> 
     <span>Choose File</span> 
     <input name="Select File" type="file" /> 
    </div>

CSS

.choose_file{ 
    position:relative; 
    display:inline-block;  
    border-radius:8px; 
    border:#ebebeb solid 1px; 
    width:250px; 
    padding: 4px 6px 4px 8px; 
    font: normal 14px Myriad Pro, Verdana, Geneva, sans-serif; 
    color: #7f7f7f; 
    margin-top: 2px; 
    background:white 
} 
.choose_file input[type="file"]{ 
    -webkit-appearance:none; 
    position:absolute; 
    top:0; left:0; 
    opacity:0; 
}

DEMO

Quelle

2013-04-18 10:37:41 Sowmya

Es ist nicht die ausgewählte Datei nicht zeigen Name – msa7

Sie können es nur mit CSS anpassen. Gehen Sie den folgenden Link durch.

HTML

<label class="btn-upload"> 
    <input type="file" name="fileupload"> 
    <button class="btn">Browse</button> 
</label> 

.btn-upload { 
    position: relative; 
    overflow: hidden; 
    display: inline-block; 
} 
.btn-upload input[type=file] { 
    position: absolute; 
    opacity: 0; 
    z-index: 0; 
    max-width: 100%; 
    height: 100%; 
    display: block; 
} 
.btn-upload .btn{ 
    padding: 8px 20px; 
    background: #337ab7; 
    border: 1px solid #2e6da4; 
    color: #fff; 
    border: 0; 
} 
.btn-upload:hover .btn{ 
    padding: 8px 20px; 
    background: #2e6da4; 
    color: #fff; 
    border: 0; 
}

http://imdebasispanda.blogspot.in/2015/08/custom-upload-button-using-css.html

Quelle

2015-08-15 19:29:43

<body> 

    <style> 
    .image{ 
    position:relative; 
    display:inline-block;  
    width:3%; 
    padding: 0%; 
    } 
.image input[type="file"]{ 
-webkit-appearance:none; 
position:absolute; 
    top:0; left:0; 
    opacity:0; 
    } 
    </style> 

    <div class="image"> 
    <span><img src='admin/ico/fms.ico' class "image"></span> 
    <input name="image" type="file" /> 
    </div> 
</body>

Quelle

2017-02-12 15:46:40

Bitte fügen Sie einen Text _how_ Dies beantwortet die Frage. – Zeta

Dieser Code funktioniert besser, wenn Sie ein Bild als Upload-Schaltfläche verwenden möchten. Ersetzen Sie einfach mein Bild durch Ihr und es wird funktionieren –

Bitte [bearbeiten] zusätzliche Informationen in Ihre Antwort. Kommentare können gelöscht werden und ihre Inhalte können verloren gehen. – Zeta

passen Sie die Datei-Schaltfläche für das Hochladen von Bildern

Antwort

Verwandte Themen