使用Java脚本显示隐藏的ASP图像控件 [英] Show hided ASP image control using java script

问题描述

如何使用Java脚本隐藏ASP图像控件
.我尝试了以下代码，但无法正常工作.调用on change函数时，图像不可见.

javascript在客户端，如果我将图像控件的可见性属性设置为false，那么可以通过javascript使其可见吗?

我尝试过的事情:

图像控制代码:

< asp:FileUpload ID ="FileUpload2" runat ="server" onchange ="previewFile()" class ="fa fa-camera" style ="opacity:1; max-width:15px; max-height:11px; margin -top:4px"/> <％-onServerClick ="postimagescrap_Click"-％>

javascript:


< script type ="text/javascript">
函数PreviewFile(){
var Preview = document.querySelector(''#<％= Image4.ClientID％>'');
var file = document.querySelector(''#<％= FileUpload2.ClientID％>'').files [0];




document.getElementById("Image4").style.visibility ="visible"
var reader = new FileReader();

reader.onloadend = function(){
楼preview.src = reader.result;
}

if(文件){
reader.readAsDataURL(file);
} else {
Preview.src =";
}
}
</script>

How to hide asp image control using java script
. I tried following code but its not working. image is not visible when on change function is called.

javascript is at client side if I set visibility property of image control to false then can i make it visible through javascript?

What I have tried:

image control code:

<asp:FileUpload ID="FileUpload2" runat="server" onchange="previewFile()" class="fa fa-camera" style="opacity:1;max-width:15px; max-height:11px; margin-top:4px"/> <%--onServerClick="postimagescrap_Click"--%>

javascript:


<script type="text/javascript">
function previewFile() {
var preview = document.querySelector(''#<%=Image4.ClientID %>'');
var file = document.querySelector(''#<%=FileUpload2.ClientID %>'').files[0];




document.getElementById("Image4").style.visibility = "visible"
var reader = new FileReader();

reader.onloadend = function () {
preview.src = reader.result;
}

if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
</script>

推荐答案

如果您尝试将图像隐藏为Image1.Visible = true;
在服务器中，Image元素将从 DOM [

If you try to hide the Image asImage1.Visible = true;
in the server, the Image element will be completely removed from the DOM[^]. and you wont be able to control the visibility in javascript( client side).

try this, in c# to hide the element

Image1.Style.Add("display","none");

现在可见性功能将按解决方案1所述进行工作

注意:display:none从该位置删除该元素，从而允许其他元素在该位置填充

visibility:hidden将元素保留在页面的声明位置，以便它仍将占用空间

now the visibility functionality will work as mentioned in the Solution 1

Note: display:none removes the element from the place, allowing other elements to fill in that place where as

visibility:hidden leaves the element in the declared place of the page such that it will still occupies the space

^ ]元素在不可见时仍会占据空间

HTML DOM Style visibility Property[^] where element will still occupy space when invisible

document.getElementById("Image4").style.visibility = "visible";
document.getElementById("Image4").style.visibility = "hidden";

HTML DOM样式显示属性 [

HTML DOM Style display Property[^] where element will not occupy space when hidden

document.getElementById("Image4").style.display = "block";
document.getElementById("Image4").style.display = "none";

这篇关于使用Java脚本显示隐藏的ASP图像控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！