Results 1 to 2 of 2

Thread: An AJAX like UPLOAD using an IFRAME and a bit of jQuery

  1. #1

    Thread Starter
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    An AJAX like UPLOAD using an IFRAME and a bit of jQuery

    Here's how I do ajax-like uploads in an inner FORM/IFRAME

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head id="Head1" runat="server">
            <title></title>
            <link href="../css/AWCOffice.css"rel="stylesheet" type="text/css" />
            <link href="../css/Final.css" rel="stylesheet" type="text/css" />
        </head>
        <body>
            <form id="form1" onsubmit="return false;" runat="server">
                <div id="acs-edit-bidsbid" style="padding-left: 10px; padding-top: 10px;">
    .
    .
    .        Step #1 - Browse for file to upload and click Upload button
            <span class="acs-span-large">Upload Key</span>
            <label class="awc-UpId awc-ctrlval1 acs-edit-small-text"></label>
            <br />
            <br />
            <form action="Upload.ashx" method="post" enctype="multipart/form-data" target="upload_target_view1">
                <div>
                    <label>
                        <input type="file" name="file" multiple>
                    </label>
                    <br /><br />
                    <button type="submit" name="username" value="(awc_UploadCreate_Bid)" class="ui-button ui-widget ui-state-highlight ui-corner-all ui-button-text-icon-acs-use ui-button-text-icon-primary" role="button" aria-disabled="false">Upload</button>
                </div>
                <iframe name="upload_target_view1" class="acs-dlg-upload">
                    <html>
                        <head></head>
                        <body></body>
                    </html>
                </iframe>
            </form>
            <ul id="filelist">
            </ul>
            <br />
    Then using jQuery I "find" that DIV with the CSS "acs-dlg-upload"

    Code:
    wesUP = wesEP.find(".acs-dlg-upload");
    
    if (wesUP.length != 0) {
        wesUPS = wesUP.siblings().find("button:submit");
        strUPS = wesUPS.attr("value") || "";
        strUPS = (window.username || "") + strUPS;
        wesUPS.attr("value", strUPS)
        wesUP.load(function () {
            var strResult = wesUP.contents().find("body").html();
            if (strResult.length != 0) {
                uploadComplete(strEditPanel, strResult);
            }
            return false;
        });
    }
    That wires up the uploadComplete function for the LOAD event of the IFRAME

    Code:
    function uploadComplete(strId, strResult) {
        var returnObj = $.parseJSON(strResult);
        var updArr = returnObj.update || [];
        var strData = "";
        var wesAWC = [];
        for (var i = 0; i < updArr.length; i = i + 2) {
            strData = updArr[i + 1];
            wesAWC = $(strId + " .awc-" + updArr[i]).not(".acs-edit-view-hidden");
            p_fillField(wesAWC, strData, strId, updArr[i], false);
        }
        if (returnObj.ok) {
            errorMessage("Upload Complete", returnObj.message);
        } else {
            errorMessage("Upload DID NOT Complete", returnObj.message);
        }
        return false;
    }
    And the FORM talks to an upload page - indicated in this line of the HTML

    <form action="Upload.ashx" method="post" enctype="multipart/form-data" target="upload_target_view1">

    And that page - in VB.Net - looks like this

    Code:
    <%@ WebHandler Language="VB" Class="Upload" %>
    
    Imports System
    Imports System.Web
    Imports System.IO
    Imports System.Data
    Imports System.Data.SqlClient
    
    Public Class Upload : Implements IHttpHandler
        
        Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
            Dim username As String = context.Request.Params("username")
            Dim credDB As String = ""
            Dim overSproc As String = ""
            If username.EndsWith(")") Then
                Dim cp As Integer = username.LastIndexOf("(")
                overSproc = username.Substring(cp + 1, username.Length - cp - 2)
                username = username.Substring(0, cp)
            End If
            If username.Contains(":") Then
                credDB = username.Split(":"c)(0)
                username = username.Split(":"c)(1)
            End If
    
            Dim postedFile As HttpPostedFile = context.Request.Files("file")
    which finishes up like this

    Code:
                        postedFile.SaveAs(Path.Combine(savepath, StoredFileName))
                        strResp &= "{ ""ok"": true"
                        strResp &= ", ""message"": """ & Message & """"
                        strResp &= ", ""update"": " & Update
                        strResp &= "}"
                        context.Response.Write(strResp) 'filename)
                        context.Response.StatusCode = 200
                    End If
                End If
            Catch ex As Exception
                strResp = "{""ok"": false, ""message"": ""Error: " & ex.Message.Replace("""", "'").Replace("\", "\\") & ".""}"
                context.Response.Write(strResp) 'filename)
                context.Response.StatusCode = 200
            End Try
        End Sub
     
        Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
            Get
                Return False
            End Get
        End Property
    
    End Class

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  2. #2
    Superbly Moderated NeedSomeAnswers's Avatar
    Join Date
    Jun 2002
    Location
    Manchester uk
    Posts
    2,660

    Re: An AJAX like UPLOAD using an IFRAME and a bit of jQuery

    Nice Example szlamany,

    I have just written a FileDownload method for my new Web app but File Upload isn't required yet as its Phase 2 consideration. I may well try and use your method to do it now so thanks
    Please Mark your Thread "Resolved", if the query is solved & Rate those who have helped you



Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width