ASPX ajax form post help
- by StealthRT
Hey all, i have this peice of code that allows a user to select a jpg image, resize it and uploads it to the server driectory. The problem being is that it reloads the aspx page when it saves the image.
My question is-is there any way to do this same thing but with ajax so that it doesn't leave the page after submitting it? I've done this pleanty of times with classic asp pages but never with a aspx page.
Here is the code for the ASPX page:
<%@ Page Trace="False" Language="vb" aspcompat="false" debug="true" validateRequest="false"%>
<%@ Import Namespace=System.Drawing %>
<%@ Import Namespace=System.Drawing.Imaging %>
<%@ Import Namespace=System.Drawing.Text %>
<%@ Import Namespace=System %>
<%@ Import Namespace=System.IO %>
<%@ Import Namespace=System.Web %>
<%@ Import Namespace=System.ServiceProcess %>
<%@ Import Namespace=Microsoft.Data.Odbc %>
<%@ Import Namespace=System.Data.Odbc %>
<%@ Import Namespace=MySql.Data.MySqlClient %>
<%@ Import Namespace=MySql.Data %>
<%@ Import Namespace=System.Drawing.Drawing2D %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.ADO" %>
<%@ Import Namespace=ADODB %>
<SCRIPT LANGUAGE="VBScript" runat="server">
const Lx = 200
const Ly = 60
const upload_dir = "/img/avatar/"
const upload_original = "tmpAvatar"
const upload_thumb = "thumb"
const upload_max_size = 256
dim fileExt
dim newWidth, newHeight as integer
dim l2
dim fileFld as HTTPPostedFile
Dim originalimg As System.Drawing.Image
dim msg
dim upload_ok as boolean
</script>
<%
Dim theID, theEmail, maleOrFemale
theID = Request.QueryString("ID")
theEmail = Request.QueryString("eMail")
maleOrFemale = Request.QueryString("MF")
randomize()
upload_ok = false
if lcase(Request.ServerVariables("REQUEST_METHOD"))="post" then
fileFld = request.files(0)
if fileFld.ContentLength > upload_max_size * 1024 then
msg = "Sorry, the image must be less than " & upload_max_size & "Kb"
else
try
fileExt = System.IO.Path.GetExtension(fileFld.FileName).ToLower()
if fileExt = ".jpg" then
originalImg = System.Drawing.Image.FromStream(fileFld.InputStream)
if originalImg.Height > Ly then
newWidth = Ly * (originalImg.Width / originalImg.Height)
newHeight = Ly
end if
Dim thumb As New Bitmap(newWidth, newHeight)
Dim gr_dest As Graphics = Graphics.FromImage(thumb)
dim sb = new SolidBrush(System.Drawing.Color.White)
gr_dest.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality
gr_dest.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality
gr_dest.FillRectangle(sb, 0, 0, thumb.Width, thumb.Height)
gr_dest.DrawImage(originalImg, 0, 0, thumb.Width, thumb.Height)
try
originalImg.save(Server.MapPath(upload_dir & upload_original & fileExt), originalImg.rawformat)
thumb.save(Server.MapPath(upload_dir & theID & fileExt), originalImg.rawformat)
msg = "Uploaded " & fileFld.FileName & " to " & Server.MapPath(upload_dir & upload_original & fileExt)
upload_ok = true
File.Delete(Server.MapPath(upload_dir & upload_original & fileExt))
catch
msg = "Sorry, there was a problem saving your avatar. Please try again."
end try
if not thumb is nothing then
thumb.Dispose()
thumb = nothing
end if
else
msg = "That image does not seem to be a JPG. Upload only JPG images."
end if
catch
msg = "That image does not seem to be a JPG."
end try
end if
if not originalImg is nothing then
originalImg.Dispose()
originalImg = nothing
end if
end if
%><head>
<meta http-equiv="pragma" content="no-cache" />
</head>
<html>
<script type="text/javascript" src="js/jquery-1.3.min.js"></script>
<form enctype="multipart/form-data" method="post" runat="server" id="sendImg">
<input type="file" name="upload_file" id="upload_file" style="-moz-opacity: 0; opacity:0; filter: alpha(opacity=0); margin-top: 5px; float:left; cursor:pointer;" onChange="$('#sendImg').submit();" >
<input type="submit" value="Upload" style="visibility:hidden; display:none;">
</form>
</body>
</html>
Any help would be great! :o)
David
