Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

how to check image size (width & height) before uploading

Status
Not open for further replies.
sandravega

sandravega

Programmer
Feb 10, 2004
43
AR
Hi you all
I'm trying to accomplish this:
I have a popup window (call it window_1) that lets the user to choose an image from his disk, then (if the user wants to) it lets him to see the real size of the image (opening an other popup, let's call it window_2), then there's a cancel button and an ok button.
I want to check the width & height of the image before uploading.
As submitting process takes a little time to go to the action page where the real uploading occurs, I want my original page (window_1) to display a message like "wait please"
So window_1 is a little complex; it has

1) a javascript code that tryes to check the both sizes of the image. If the size is ok, it is supposed to hide a DIV element (the form one) and show another DIV element, with the message "wait", on the same page.
2) if the size is not ok, then it display an alert message and cancel the submit, returning a "false" to the "onSubmit" event handler.

Well, nothing works. The "false" return to the onSubmit doesn't stops the submitting of the form, the image size doesn't work properly and everything gets so slow that I finally got a timeout error instead of the uploading I want

I think I have several errors but I couldn´t solve them myself

So I'm sending a simplified version of my code as a bottle to the sea...
Thank you all

Sandra

Here is the code: (note: the "top.inc" includes the HEAD, the initial body tag and some other stuff. The messages are in Spanish because is intended to be for spanish-speakers)

<%
response.buffer=true
server.scripttimeout=40
%>
<!-- #INCLUDE file="top.inc" -->

<script language="javascript" type="text/javascript">
<!-- Begin to hide script contents from old browsers.

function Validar(seccion1,seccion2,image) {
myImage=new Image();
myImage.src=image;
if (myImage.height>=500 || myImage.width>=500){
if (myImage.width>=500){
alert ("La imagen supera los 500 pixels de ancho ("+myImage.width+")");
}else{
if (myImage.height>=500){
alert ("La imagen supera los 500 pixels de alto ("+myImage.height+")");
}
}
document.forms(0).reset();
return false;
}else{
seccion1.style.display="";
seccion2.style.display="NONE";
return true;
}

}
}


function imageWindow(image,titulo,texto,w,h) {
options="top=20,left=20,toolbar=0,status=0,menubar=1,scrollbars=0,"+
"resizable=0,width="+w+",height="+h;
MyWin=open("","",options);
MyWin.document.open();
MyWin.document.write("<html><head><title>");
MyWin.document.write(titulo);
MyWin.document.write("</title><link rel='stylesheet' href='backstyle.css' type='text/css'>");
MyWin.document.write("</head><body background=images/fondohome.gif><center>")
MyWin.document.write("<font face=verdana size=2><b>"+texto+"</b></font><br><font face=verdana size=1><b>Escala en Cm.</b><br></font>");
MyWin.document.write("<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH='474'>" );
MyWin.document.write("<tr><td bgcolor=#cccccc valign=bottom colspan=2 align=left WIDTH='474'><img src='icons/reglah.gif'></td></tr>");
MyWin.document.write("<tr><td bgcolor=#cccccc valign=top WIDTH='16'><img src='icons/reglav.gif'></td><td bgcolor=#cccccc valign=top align=left WIDTH='458'><img border=1 src='"+image+"'></td></tr>");
MyWin.document.write("<tr><td colspan='2' align='center' height='30'><input type='button' class=boton_gral onClick='javascript:self.close()' value='Cerrar'></td></tr></table>");
MyWin.document.write("</center></body></html>");

MyWin.document.close();
}

// End the hiding here. -->
</script>

<DIV ALIGN="CENTER" ID="seccion2" style="display:">
<FORM METHOD="POST" ENCTYPE="multipart/form-data" ACTION="carga_img_ok.asp?Id=<%=id%> onSubmit="Validar(seccion1,seccion2,nombreimagen.value)">
<TABLE BORDER=0 CELLSPACING=1 CELLPADDING=2 WIDTH="90%" align="center">
<TR>
<TD>
<input type="file" name="nombreimagen">
</TD>
</TR>
<TR>
<TD>
<input type="button" name="btnVerificar" value="Verificar" onClick="javascript:imageWindow(nombreimagen.value,'',nombreimagen.value,500,550)">
</TD>
</TR>
<TR>
<TD >
<input name="button" type="button" class="boton_gral" onClick="javascript:window.close()" value="Cancelar">
&nbsp;&nbsp;
<input name="finalizar" type="submit" value="Finalizar">
</TD>
</TR>
</TABLE>
</form>
</DIV>

<DIV ALIGN="CENTER" ID="seccion1" style="display:NONE ;">
<TABLE HEIGHT="100%" WIDTH="100%" BORDER="0">
<TR>
<TD>
AGUARDE UN INSTANTE POR FAVOR ...
</TD>
</TR>
</TABLE>
</div>

</body>
</html>


 
Sort by date Sort by votes
Your action attribute in your form tag is missing a closing quotation mark and you're missing the "return" keyword also

Change this:
Code: 
<FORM METHOD="POST" ENCTYPE="multipart/form-data" ACTION="carga_img_ok.asp?Id=<%=id%> onSubmit="Validar(seccion1,seccion2,nombreimagen.value)">

to this:
Code: 
<FORM METHOD="POST" ENCTYPE="multipart/form-data" ACTION="carga_img_ok.asp" onSubmit="[b]return [/b]Validar(seccion1,seccion2,nombreimagen.value)">
[b]<input type="hidden" name="Id" value="<%=id%>">[/b]

I'll take look at your JavaScript code...

Adam
while(ignorance){perpetuate(violence,fear,hatred);life=life-1};
 
Upvote 0 Downvote
Ok, two more things. You have an extra } at the end of your Validar function and this:
document.forms(0).reset();
should be this:
document.forms[0].reset();

Adam
while(ignorance){perpetuate(violence,fear,hatred);life=life-1};
 
Upvote 0 Downvote
Adam, you're a binary angel
thanks a lot (it stills has some trouble with the time it takes to "charge" de image in the image object, but I'll try)
Sandra
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
688
Rayj0000
Rayj0000
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
810
lexer
lexer
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
1K
xwb
xwb
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
925
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top