尺寸检查后避免显示图像

时间:2019-06-24 09:54:04

标签: javascript php

如果图像尺寸大于1mb,我不想显示图像

在输入类型文件的CheckSelfImage()事件中称为onchange

if($qy_emp3['KYC'] == 'Rejected' or $qy_emp3['KYC'] == 'No' or $qy_emp3['KYC'] == "")

代码:

?>
<form name="atc" action="<?=$_SERVER['PHP_SELF']?>" method="post" onsubmit="return validateForm()" enctype="multipart/form-data">   
<input type="hidden" name="SelfImageName" value="<? echo $qy_emp3['SelfImage'];?>" />
<input type="hidden" name="PanImageName" value="<? echo $qy_emp3['PanImage'];?>" />
<input type="hidden" name="AadhaarImageName" value="<? echo $qy_emp3['AadhaarImage'];?>" />
<input type="hidden" name="AadhaarImageBackName" value="<? echo $qy_emp3['AadhaarImageBack'];?>" />
<input type="hidden" name="CancelChequeImageName" value="<? echo $qy_emp3['CancelChequeImage'];?>" />
<div class="col-lg-12">
<div class="col-md-6 paddt">
<p class="font-600 m-b-5">Upload Your Picture(<b>max size upto 1MB</b>)            </p>
<input type="file" name="SelfImage" id="SelfImage" class="form-control" onchange="CheckSelfImage();" />
</div>
<div class="col-md-6 paddt">
<p class="font-600 m-b-5"></p>
<img id="SelfImageShow" src="#" alt="Image Preview" height="200px" width="200px" />
<?
if($qy_emp3['SelfImage'] != "")
{
?>
<a href="images/<? echo $qy_emp3['SelfImage'];?>" target="_blank">
<img src="images/<? echo $qy_emp3['SelfImage'];?>" alt="Current Image" height="200px" width="200px" />
</a>
<?
}
else
{
?>
<img src="images/<? echo $qy_emp3['SelfImage'];?>" alt="Current Image" height="200px" width="200px" />
<?
}
?>          
</div>
</div>
</form>
function CheckSelfImage()
{
var selfsize = 1048576;
var file_size=document.getElementById('SelfImage').files[0].size;
if(file_size>=selfsize)
{
alert('Self Image File size is too large.');
document.getElementById('SelfImageShow').value="";
return false;
}  
}

图片过大后无法显示图片

1 个答案:

答案 0 :(得分:0)

您正试图将值设置为空白或null。实际上,您必须将名为src的图像属性设置为空值。

    ?>
    <form name="atc" action="<?=$_SERVER['PHP_SELF']?>" method="post" onsubmit="return validateForm()" enctype="multipart/form-data">   
    <input type="hidden" name="SelfImageName" value="<? echo $qy_emp3['SelfImage'];?>" />
    <input type="hidden" name="PanImageName" value="<? echo $qy_emp3['PanImage'];?>" />
    <input type="hidden" name="AadhaarImageName" value="<? echo $qy_emp3['AadhaarImage'];?>" />
    <input type="hidden" name="AadhaarImageBackName" value="<? echo $qy_emp3['AadhaarImageBack'];?>" />
    <input type="hidden" name="CancelChequeImageName" value="<? echo $qy_emp3['CancelChequeImage'];?>" />
    <div class="col-lg-12">
        <div class="col-md-6 paddt">
            <p class="font-600 m-b-5">Upload Your Picture(<b>max size upto 1MB</b>)            </p>
            <input type="file" name="SelfImage" id="SelfImage" class="form-control" onchange="CheckSelfImage();" />
        </div>
        <div class="col-md-6 paddt">
            <p class="font-600 m-b-5"></p>
            <img id="SelfImageShow" src="#" alt="Image Preview" height="200px" width="200px" />
            <?
            if($qy_emp3['SelfImage'] != "")
            {
            ?>
            <a href="images/<? echo $qy_emp3['SelfImage'];?>" target="_blank">
            <img src="images/<? echo $qy_emp3['SelfImage'];?>" alt="Current Image" height="200px" width="200px" />
            </a>
            <?
            }
            else
            {
            ?>
            <img src="images/<? echo $qy_emp3['SelfImage'];?>" alt="Current Image" height="200px" width="200px" />
            <?
            }
            ?>          
        </div>
    </div>
</form>
function CheckSelfImage()
{
var selfsize = 1048576;
var file_size=document.getElementById('SelfImage').files[0].size;
if(file_size>=selfsize)
{
alert('Self Image File size is too large.');
$("SelfImageShow").attr("src","");
return false;
}  
}