画像をクリックするとアップロードボタンが表示されます

Question

私のhtmlファイルには画像の後ろに隠されたファイル入力があります。画像をクリックすると画像を検索するウィンドウが表示されます。問題はサブミット部分にあり、送信ボタンが必要ですが、画像がクリックされない限り表示したくありません。

ボタンをクリックすると、ページが再表示され、ボタンは表示されません（イメージが再びクリックされない限り）。

ここに私のhtmlコードは次のとおりです。

<form> 
    <input id="file-input" type="file" file-model="formData.img" style="display: none;"/> 
    <br> 
    <button class="btn btn-booking" id = "uploadButton" ng-click = "changeImage(user._id)" style = "display:block; margin: 0 auto; "> Upload </button> 
</form> 

Answer 1

あなたがそうのように、画像がクリックされるまで、フォームが送信されるまで、画像を非表示にし、その後、フォームを非表示にするCSS displayプロパティを使用することができます。

var hiderImg = document.getElementById('hiderImg'); 
 

 
hiderImg.addEventListener('click', function() { 
 
    // hide image, show form 
 
    document.forms[0].style.display = "inline"; 
 
    hiderImg.style.display = "none"; 
 
}); 
 

 
document.getElementById('uploadButton').addEventListener('click', function() { 
 
    // show image, hide form 
 
    hiderImg.style.display = "inline-block"; 
 
    document.forms[0].style.display = "none"; 
 
});

#hiderImg { 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 

 
#hiddenForm { 
 
    display: none; 
 
}

<img src="https://upload.wikimedia.org/wikipedia/commons/7/74/White_domesticated_duck%2C_stretching.jpg" id="hiderImg" /> 
 
<form id="hiddenForm" onsubmit="javascript: return false;"> 
 
    <input id="file-input" type="file" file-model="formData.img" /> 
 
    <br> 
 
    <button class="btn btn-booking" id = "uploadButton" ng-click = "changeImage(user._id)" style = "display:block; margin: 0 auto; "> Upload </button> 
 
</form>

注：私はを追加しましたをフォームに送信すると、この例では送信を試みません。それを取り除くことができます。

別のメモ：アップロードバーの下に[アップロード]ボタンを表示する場合は、ボタンからdisplay:block;の設定を削除します。

ng-show="fileExist" 

それはあなたのコントローラでこれを入れた後：

var uplader = angular.element(document.getElementById("file-input")); 
    uplader.bind("change", function(){ 
    if(uplader.val()){ 
    $scope.fileExist =true; 
    }else{ 
    $scope.fileExist =false; 
    } 
    }); 

それは一種のvisibiltyを取り扱う入力ファイルに時計のすべての

Answer 2

まず、あなたのイメージにこのディレクティブを置きますあなたのイメージの。