ASPX ajax form post help
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 %>
开发者_JAVA技巧<%@ 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
ajax and <input type="file"> don't work well together. the underlying XMLHttpRequest object is restricted and can't actually access the file upload. There is a very limited set of things that you can do with any javascript as it pertains to the file upload. The easiest way to fake what you are trying to do is use an iframe.
加载中,请稍侯......
精彩评论