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

**szlamany** · May 27th, 2015, 12:55 PM

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

**NeedSomeAnswers** · Jun 8th, 2015, 04:10 AM

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

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

Thread Tools

Display

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

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

Posting Permissions