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
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 :wave:
