wake-up-neo.com

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

Ich habe einen Button zum Hochladen von Image-Dateien. Ich möchte diesen Button anpassen, ich möchte mehr als eine Image-Datei hinzufügen. Was ist die Logik, die erreicht werden soll.

<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 der choose-Schaltfläche anzupassen. Ich möchte, dass ein Kamerabild vor dem no files choosen-Text angezeigt wird.

Wie mache ich das, um meine Website zu verbessern?.

Vielen Dank

11
user2161650

Sie können die Eingabe ausblenden, indem Sie sie in ein div einfügen, nämlich height:0px und overwflow:hidden. Dann fügen Sie eine Schaltfläche oder ein anderes HTML-Element hinzu, das Sie nach Belieben gestalten können. Im onclick-Ereignis erhalten Sie das Eingabefeld mit Javascript oder jQuery und klicken Sie darauf:

<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 ist die Eingabe ausgeblendet, aber Sie können die Schaltfläche nach Ihren Wünschen gestalten, die Dateieingabe wird beim Klicken immer geöffnet.

Wenn Sie jQuery nicht verwenden möchten, ersetzen Sie das Script-Tag durch dieses Script-Tag:

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

Versuchen Sie diese manipulierte Lösung. (Ich habe es heute für ein Projekt ausprobiert :))

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

6
Sowmya

Sie können es nur mit CSS anpassen. Gehen Sie den untenstehenden 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

1
Debasis Panda
    <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>
0
J.Mbai