By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
457,905 Members | 1,701 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 457,905 IT Pros & Developers. It's quick & easy.

get image side via client side script before file uplaod

P: n/a
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>



--
mo*******@nospam.com
Nov 18 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
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" <mo*******@nospam.com> wrote in message
news:#P**************@TK2MSFTNGP11.phx.gbl...
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>



--
mo*******@nospam.com

Nov 18 '05 #2

P: n/a
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

Nov 18 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.