ファイルから新しい画像を選択したときに画像を変更する

Question

入力タイプ= "ファイル"を使用して画像を選択しています。しかし、私はファイルボタンを選択してを隠していて、その代わりにイメージを表示しています。ユーザーがImageをクリックすると、ファイルオプションが開きます。ここで

はここでその

<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> 

ための私のコードでは、フォーカスが失われたときに画像を表示するためのJSコード私のCSSここで

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

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

されている

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; 


         }; 


       } 

}) 

私は思います問題はの表示のためです：なししかし、私はわかりません。それを削除すると、私は表示したくないファイルを選択するオプションが表示されます。 これを達成するためのアドバイス。あなたは

Answer 1

私はあなたはそれがあなたの入力フィールドにdisplay: noneを設定せずに動作することを、修正に理解場合は、ちょうどこの

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