zoltan_ie
December 1st, 2003, 07:57 AM
I have this page that previews an image before its uploaded so the user can see how there logo will look on the site.
What my page also does is check the image height and width and size of the image to check it is within a certain size.
my problem is that the image needs to be fully load before I can access the properties of the image.
So I need the OnLoad function to fire once the page is loaded.
problem is how do I then display the values on the page? How can I change text on a webpage once its loaded. I don't want to use message boxes.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script language='javascript'>
//HTML 4.01 specification (w3c).ace
//http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/input_file.asp
function WriteHTML()
{
var fileName = document.forms[0].file.value;
if(0 != fileName)
{
if((true == isURL(fileName)) || (true == isFile(fileName)))
{
var fileExtension = fileName.substring(fileName.lastIndexOf(".") + 1);
if (fileExtension == "jpg" || fileExtension == "jpeg" || fileExtension == "gif" || fileExtension == "png")
{
}
else
{
alert("The file you have selected is not an image");
document.forms[0].file.value = "";
}
}
else
{
alert("The file you have selected is not an image");
}
}
}
function isURL(url)
{
var urlPattern = new RegExp("^(http|https|ftp)\://((([a-z_0-9\-]+)+(([\:]?)+([a-z_0-9\-]+))?)(\@+)?)?(((((([0-1])?([0-9])?[0-9])|(2[0-4][0-9])|(2[0-5][0-5])))\.(((([0-1])?([0-9])?[0-9])|(2[0-4][0-9])|(2[0-5][0-5])))\.(((([0-1])?([0-9])?[0-9])|(2[0-4][0-9])|(2[0-5][0-5])))\.(((([0-1])?([0-9])?[0-9])|(2[0-4][0-9])|(2[0-5][0-5]))))|((([a-z0-9\-])+\.)+([a-z]{2}\.[a-z]{2}|[a-z]{2,4})))(([\:])(([1-9]{1}[0-9]{1,3})|([1-5]{1}[0-9]{2,4})|(6[0-5]{2}[0-3][0-6])))?$");
return urlPattern.test(url.toLowerCase());
}
function isFile(file)
{
var filePattern = new RegExp(/^(([a-zA-Z]\:|\\)\\([^\\]+\\)*[^\/:*?\"\"<>|]+\.[a-zA-Z0-9]{1,4})?$/);
return filePattern.test(file.toLowerCase());
}
</script>
<body>
<form method="post" action="Untitled-2.asp">
<input type="file" LANGUAGE=javascript onchange="WriteHTML()" name="file" style="LEFT: 290px; WIDTH: 378px; TOP: 17px; HEIGHT: 22px" size=31>
<input type="submit" name="Submit" value="Preview">
</form>
</body>
</html>
<%@ Language=VBScript %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Original Image</title>
</head>
<body>
<%
'Microsoft Beefs up VBScript with Regular Expressions
dim sFileName
sFileName = Request.Form("file")
If sFileName <> "" Then
%>
<p>Original Image:</p>
<p><img border="0" src="<%=Response.Write(sFileName)%>"></p>
<script language='javascript'>
var oImage = document.images[0];
var nMaxHeight = 60;
var nMaxWidth = 150;
var nMaxFileSize = 3000; //in bytes
var nImageHeight = document.images[0].height;
var nImageWidth = document.images[0].width;
var nImageSize = document.images[0].fileSize;
document.write("Image size: " + nImageWidth + "Pixels * ");
document.write(nImageHeight + " Pixels");
document.write("<BR>" + nImageSize + " bytes in size");
if(nMaxWidth < nImageWidth)
{
document.write("<BR>Image Width is " + (nImageWidth - nMaxWidth) + " pixels over the limit");
}
if(nMaxHeight < nImageHeight)
{
document.write("<BR>Image Height is " + (nImageHeight - nMaxHeight) + " pixels over the limit");
}
if(nMaxFileSize < nImageSize)
{
document.write("<BR>Image size is " + (nImageSize - nMaxFileSize) + " bytes over the limit");
}
</script>
<p>Resized Image:</p>
<p><img border="0" src="<%=Response.Write(sFileName)%>" width="150" height="60"></p>
<%
End If
%>
</body>
</html>
What my page also does is check the image height and width and size of the image to check it is within a certain size.
my problem is that the image needs to be fully load before I can access the properties of the image.
So I need the OnLoad function to fire once the page is loaded.
problem is how do I then display the values on the page? How can I change text on a webpage once its loaded. I don't want to use message boxes.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script language='javascript'>
//HTML 4.01 specification (w3c).ace
//http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/input_file.asp
function WriteHTML()
{
var fileName = document.forms[0].file.value;
if(0 != fileName)
{
if((true == isURL(fileName)) || (true == isFile(fileName)))
{
var fileExtension = fileName.substring(fileName.lastIndexOf(".") + 1);
if (fileExtension == "jpg" || fileExtension == "jpeg" || fileExtension == "gif" || fileExtension == "png")
{
}
else
{
alert("The file you have selected is not an image");
document.forms[0].file.value = "";
}
}
else
{
alert("The file you have selected is not an image");
}
}
}
function isURL(url)
{
var urlPattern = new RegExp("^(http|https|ftp)\://((([a-z_0-9\-]+)+(([\:]?)+([a-z_0-9\-]+))?)(\@+)?)?(((((([0-1])?([0-9])?[0-9])|(2[0-4][0-9])|(2[0-5][0-5])))\.(((([0-1])?([0-9])?[0-9])|(2[0-4][0-9])|(2[0-5][0-5])))\.(((([0-1])?([0-9])?[0-9])|(2[0-4][0-9])|(2[0-5][0-5])))\.(((([0-1])?([0-9])?[0-9])|(2[0-4][0-9])|(2[0-5][0-5]))))|((([a-z0-9\-])+\.)+([a-z]{2}\.[a-z]{2}|[a-z]{2,4})))(([\:])(([1-9]{1}[0-9]{1,3})|([1-5]{1}[0-9]{2,4})|(6[0-5]{2}[0-3][0-6])))?$");
return urlPattern.test(url.toLowerCase());
}
function isFile(file)
{
var filePattern = new RegExp(/^(([a-zA-Z]\:|\\)\\([^\\]+\\)*[^\/:*?\"\"<>|]+\.[a-zA-Z0-9]{1,4})?$/);
return filePattern.test(file.toLowerCase());
}
</script>
<body>
<form method="post" action="Untitled-2.asp">
<input type="file" LANGUAGE=javascript onchange="WriteHTML()" name="file" style="LEFT: 290px; WIDTH: 378px; TOP: 17px; HEIGHT: 22px" size=31>
<input type="submit" name="Submit" value="Preview">
</form>
</body>
</html>
<%@ Language=VBScript %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Original Image</title>
</head>
<body>
<%
'Microsoft Beefs up VBScript with Regular Expressions
dim sFileName
sFileName = Request.Form("file")
If sFileName <> "" Then
%>
<p>Original Image:</p>
<p><img border="0" src="<%=Response.Write(sFileName)%>"></p>
<script language='javascript'>
var oImage = document.images[0];
var nMaxHeight = 60;
var nMaxWidth = 150;
var nMaxFileSize = 3000; //in bytes
var nImageHeight = document.images[0].height;
var nImageWidth = document.images[0].width;
var nImageSize = document.images[0].fileSize;
document.write("Image size: " + nImageWidth + "Pixels * ");
document.write(nImageHeight + " Pixels");
document.write("<BR>" + nImageSize + " bytes in size");
if(nMaxWidth < nImageWidth)
{
document.write("<BR>Image Width is " + (nImageWidth - nMaxWidth) + " pixels over the limit");
}
if(nMaxHeight < nImageHeight)
{
document.write("<BR>Image Height is " + (nImageHeight - nMaxHeight) + " pixels over the limit");
}
if(nMaxFileSize < nImageSize)
{
document.write("<BR>Image size is " + (nImageSize - nMaxFileSize) + " bytes over the limit");
}
</script>
<p>Resized Image:</p>
<p><img border="0" src="<%=Response.Write(sFileName)%>" width="150" height="60"></p>
<%
End If
%>
</body>
</html>