点击图片显示上传按钮

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

点击图片显示上传按钮

回答

相关问题