Ändern des Bildes, wenn ich ein neues Bild aus den Dateien auswählen

Question

Ich wähle ein Bild mit input type = "file". Aber ich verstecke die wähle Datei-Taste und zeige stattdessen ein Bild. Wenn der Benutzer auf Image klickt, werden die Dateioptionen geöffnet.

mein Code hier für das ist

<div class="image-get"> 
        <label for = "LoadImage"> 
         <span class="glyphicon glyphicon-user"> 
         <img id="PreviewImage" align="left"> 
         </span> 
        </label> 
        <input type="file" name="LoadImage" id="LoadImage" data-bind="value: LoadImage, hasfocus: LoadImage.focused"> 

      </div> 

Hier ist meine CSS

.image-get > input 
{ 
display: none; 
} 

.image-get img 
{ 
width: 80px; 
cursor: pointer; 
} 

Hier das Bild für die Ansicht der js-Code wird, wenn der Fokus verloren

self.LoadImage.focused = ko.observable(); 

    self.LoadImage.focused.subscribe(
    function(newValue) { 



       if (!newValue) 
       { 
        //alert("yupppiiieeee"); 

        var reader = new FileReader(); 


        reader.readAsDataURL(document.getElementById("LoadImage").files[0]); 


         reader.onload = function (Event) 
         { 

         //var source = src; 
         document.getElementById("PreviewImage").src = Event.target.result; 


         }; 


       } 

}) 

Ich denke, Das Problem ist wegen Anzeige: keine, aber ich bin mir nicht sicher. Wenn ich das entferne, zeigt die Option zum Auswählen der Datei an, was ich nicht anzeigen möchte. Jeder Rat, wie man es erreicht. Vielen Dank, dass Sie

Answer 1

Wenn ich dich verstanden zu korrigieren, dass es ohne Einstellung display: none auf dem Eingabefeld arbeitet, nur seine CSS

.image-get > input 
{ 
    position: absolute; 
    left: -9999px; 
}