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>

注意：我在表单中添加了onsubmit="javascript: return false;"，以便在此示例中不会尝试提交;你可以删除它。

另一个注释：如果您希望上传按钮显示在浏览栏下，请从按钮中删除display:block;设置。

Answer 2

首先将此指令放到您的图像中：

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

它在您的输入文件中有一种处理图像可见性的手表。

单击图像时显示上载按钮

2 个答案: