get image side via client side script before file uplaod

07-15-2004

I need to get the size on an image client side before the client uploads it,
and if its too large, I need to alert the client rather than doing a
postback. The code below successfully writes the file size to the
text-input element on the second click (attempt), but writes -1 on the first
click. It must return the file size on the first click to be useable. Can
anyone explain why it returns -1 on the first click and then the actual file
size on the second click, and also can you provide a good solution to this?

Thanks!

<%@ Page Language="vb" AutoEventWireup="false"
Codebehind="zzTestFileSize.aspx.vb" Inherits="Charmpix.zzTestFileSize"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>zzTestFileSize</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5"
name="vs_targetSchema">

</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">

<script language="javascript" type="text/javascript">
function fromOnChange() {
var im;
im = new Image();
im.src = document.Form1.ctlFile.value;
document.Form1.txtTest.value = im.fileSize;
document.Form1.txtPath.value = im.src;
}
</script>

<INPUT type="file" id="ctlFile" name="ctlFile"> <INPUT type="button"
value="Button" onclick="fromOnChange()">
<INPUT type="text" id="txtTest"> <INPUT id="txtPath" type="text">
</form>
</body>
</HTML>

--

07-15-2004

You will need a client-side executable to do this, such as an ActiveX
control or Java Applet.

--
HTH,
Kevin Spencer
..Net Developer
Microsoft MVP
Big things are made up
of lots of little things.

"moondaddy" <> wrote in message
news:#...
> I need to get the size on an image client side before the client uploads
it,
> and if its too large, I need to alert the client rather than doing a
> postback. The code below successfully writes the file size to the
> text-input element on the second click (attempt), but writes -1 on the
first
> click. It must return the file size on the first click to be useable. Can
> anyone explain why it returns -1 on the first click and then the actual
file
> size on the second click, and also can you provide a good solution to
this?
>
> Thanks!
>
>
>
>
>
> <%@ Page Language="vb" AutoEventWireup="false"
> Codebehind="zzTestFileSize.aspx.vb" Inherits="Charmpix.zzTestFileSize"%>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
> <HTML>
> <HEAD>
> <title>zzTestFileSize</title>
> <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
> <meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
> <meta content="JavaScript" name="vs_defaultClientScript">
> <meta content="http://schemas.microsoft.com/intellisense/ie5"
> name="vs_targetSchema">
>
> </HEAD>
> <body MS_POSITIONING="GridLayout">
> <form id="Form1" method="post" runat="server">
>
> <script language="javascript" type="text/javascript">
> function fromOnChange() {
> var im;
> im = new Image();
> im.src = document.Form1.ctlFile.value;
> document.Form1.txtTest.value = im.fileSize;
> document.Form1.txtPath.value = im.src;
> }
> </script>
>
> <INPUT type="file" id="ctlFile" name="ctlFile"> <INPUT type="button"
> value="Button" onclick="fromOnChange()">
> <INPUT type="text" id="txtTest"> <INPUT id="txtPath" type="text">
> </form>
> </body>
> </HTML>
>
>
>
>
>
>
>
> --
>
>
>

07-16-2004

Hi Moondaddy,

AS for image 's "fileSize" return -1 problem, I suspect that whether it is
caused by the image object is not completely loaded. Based on my research
,the image object contains a member property called "complete" which
indicate whether the image has been completely loaded or not. So I think we
can put a "If..." statement before we get the image's fileSize for example

if(im.complete== true)
{
alert(im.fileSize);
}

And here is a test page I've made and you can also have a test on your side
to see whether it works.
=================aspx page====================
<HTML>
<HEAD>
<title>CheckImageSize</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
<script language="javascript">
var im;
function loadImage()
{
im = new Image();
im.src = document.getElementById("imgUploader").value;
}

function checkSize()
{
if(im!=null && im.complete == true)
{
alert(im.fileSize);
}
else
{
alert("not completely loaded!");
}
}
</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<table width="100%" align="center">
<tr>
<td>
<INPUT id="imgUploader" type="file" onpropertychange="loadImage()">
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<INPUT type="button" value="Check Image File Size"
onclick="checkSize()">
</td>
</tr>
</table>
</form>
</body>
</HTML>
=========================

Thanks.

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

Get Preview at ASP.NET whidbey
http://msdn.microsoft.com/asp.net/whidbey/default.aspx

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Allow clients to uplaod file to webserver via asp.net	hormuz	ASP .Net	0	07-07-2007 12:32 PM
LinkButton Client side code firing before server side code	alexmac262@hotmail.com	ASP .Net	1	03-22-2007 06:13 PM
Client side script after client side validation with asp.net 2.0	Boss302	ASP .Net	0	11-21-2006 08:43 AM
Server-side script with input parameter from Client-side script	Magnus Blomberg	ASP .Net	3	04-14-2005 12:21 PM
Fire server side event before client side event		ASP .Net Web Controls	3	03-18-2005 03:20 PM