Saturday, March 24, 2012

Uploading file in chunks using AJAX (or asynchronous call)

Hiya guys,

Just done some work with FileUpload in my AJAX-enabled web application, unfortunately using full-postback, so want to change it using AJAX.

Got some ideas, but not if that way will work, so need some bright ideas maybe from someone who already done something similar. Basically I want to achieve partial postback on uploading files in chunks, so not using the server's memory which can lead to server restart... Just saw some very interesting code snippets, but those were using ActiveXObject, which I would like to avoid.Is it possible to use a ScriptManager in some way to achieve similar results?
I guess it would be using XMLHTTP, as I already did some digging, but I mainly seen this using ActiveXObject.

Anyone with such an experience?

Thanks

Ben

hello.

old ajax code that needs to be ported to the asp.net ajax version, but it might still point you in the right direction:

http://msmvps.com/blogs/luisabreu/archive/2006/12/14/uploading-files-without-a-full-postback.aspx


Hi,

Here is a sample:

PageA.aspx:

<%@. Page Language="C#" %>

<%@. Register src="http://pics.10026.com/?src=Gallery.ascx" TagName="Gallery" TagPrefix="uc1" %>
<%@. Register src="http://pics.10026.com/?src=Upload.ascx" TagName="Upload" TagPrefix="uc2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Upload1.Button1clientID = Gallery1.Button1clientID;
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

</div>
<uc1:Gallery ID="Gallery1" runat="server" />
<uc2:Upload ID="Upload1" runat="server" />
</form>
</body>
</html>

Gallery.ascx:

<%@. Control Language="C#" ClassName="Gallery" %>

<script runat="server">

protected void Button1_Click(object sender, EventArgs e)
{
}

protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString();
}

public string Button1clientID
{
get
{
return Button1.ClientID;
}
}

</script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<div style="visibility:hidden"><asp:Button ID="Button1" runat="server" OnClick="Button1_Click" UseSubmitBehavior="false" Text="Button" /></div>
</ContentTemplate>
</asp:UpdatePanel>

Upload.ascx:

<%@. Control Language="C#" ClassName="Upload" %>

<script runat="server">
private string buttonclientID = "";
public string Button1clientID
{
set
{
buttonclientID = value;
}
}
</script>

<script type="text/javascript">
function submitForm(frameName,upload){
document.forms[0].action="PageA.aspx"
document.forms[0].target=frameName;
window.setTimeout(function(){
var uploadE=document.getElementById(upload);
uploadE.parentElement.appendChild(document.createTextNode(uploadE.value));
uploadE.parentElement.replaceChild(uploadE.cloneNode(true),uploadE);
},100);
document.forms[0].submit();
document.getElementById("<%=buttonclientID %>").click();
}
</script>

<div id="Div1">
<input type="file" name="upload" id="upload" />
<button onclick="javascript:submitForm('hiddenFrame','upload')">Upload</button>
<iframe name="hiddenFrame" src="http://pics.10026.com/?src=blank.htm" id="hiddenFrame" style="display: none">
</iframe>
</div>

An Ajax Alternative for FileUpload:

We've all embraced Ajax as a revolutionary technology, but many of us forget (or are not aware) of asynchronous posts in the times before XmlHttp requests. Our good old friend the IFrame used to be the preferred option for asynchronous http communications. Because an iframe is in essence it's own browser window, it can be used to fire off asynchronous requests (both POST and GET). However, even more important is an IFrame's ability to be a 'target' of a form POST. By adding an IFrame to the page and setting it as the target of the form post, you can in essence create an asynchronous file transfer.

For more help about Ajax Alternative for FileUpload, Please check: http://blogs.infragistics.com/blogs/tony_lombardo/archive/2007/04/09/file-uploads-where-s-the-ajax.aspx

NOTE:This response contains a reference to a third party World Wide Web site. Microsoft is providing this information as a convenience to you.

Microsoft does not control these sites and has not tested any software or information found on these sites; therefore, Microsoft cannot make any representations

regarding the quality, safety, or suitability of any software or information found there. There are inherent dangers in the use of any software found on the Internet,

and Microsoft cautions you to make sure that you completely understand the risk before retrieving any software from the Internet.

Best Regards,


hello.

well, simple code, but i still prefer my code since it'll return the response for the upload.

No comments:

Post a Comment