點擊圖片顯示上傳按鈕

在我的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>

來源

2017-04-20 thelili700

上面的代碼中沒有'img'，但是您可能希望利用[ng-show]（https://docs.angularjs.org/api/ng/directive/ngShow），[ng-hide] （https://docs.angularjs.org/api/ng/directive/ngHide）或[ng-if]（https://docs.angularjs.org/api/ng/directive/ngIf）。只需將它們鍵入到控制器上的某個屬性或「$ scope」中，單擊該圖像即可更改該屬性。 –

您可以使用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>

注：我加onsubmit="javascript: return false;"以便它不會嘗試在此示例中提交;你可以刪除它。

另一注意事項：如果您希望上傳按鈕顯示在瀏覽欄下，請從按鈕中刪除display:block;設置。

來源

2017-04-20 12:41:07 freginold

的所有首先把這個指令給你的形象：

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; 
    } 
    });

它在處理公開程度的輸入文件類型的手錶你的形象。

來源

2017-04-20 12:47:19

點擊圖片顯示上傳按鈕

回答

相關問題