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.