How can I upload a file using JavaScript without a postback?

Question

I am working on a file upload in ASP.NET. I used <input type=file id=upload> and <input type=button id="btnupload" value="File Upload">

I want to upload the file in JavaScript. The update panel does not work, I do not want it to postback and refresh the page.

thanks but If you have code related to fileUpload in javascript then send me. please help me.

Answer 1

If you want to prevent the page from being refreshed, send a 204 No Content HTTP header.

Answer 2

I tried ajax upload at that time it will be refresh my page and also In UpdatePanel ASP:FileUpload control not work Properly, If you have any link or code then send me I will try it. I also used ASP.NET 2.0 I used Update Panel but it will be refresh page when the click on the Button.

Answer 3

If you are using visual studio 2008 (or has ajax installed in 05) then wrap an update panel arround your input fields, this will make the postback asynchronously using javascript (ajax).

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
    <asp:FileUpload ID="FileUpload1" runat="server" />
    <asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>

Answer 4

You can use jQuery and jQuery form plugin. I used this combination for few project and i had no problems, even for big files (10mb)

<form action="form.asp" method="post">
.......
</form>
$('form').submit(function(){
 $(this).ajaxSubmit(function(data){
  $('#updateDiv').html(data); // or append/prepend/whatever
 })
 return false
})

Ofcourse, the action of the form will return what you need to update. You may want to add some extra functions to handle errors, but this should work fine

Answer 5

I'm not sure of the "proper" way to do it using ASP.NET, but generally you'll want your form, and a hidden iframe that the form posts to:

<script type="text/javascript">
    function handleUploadResponse(...) {
        // do something...
    }
</script>
<form method="post" action="upload.aspx" target="hiddenframe" enctype="multipart/form-data"></form>
<iframe id="hiddenframe" name="hiddenframe" style="display:none"></iframe>

When you submit the form, this will post to whatever script will handle the upload in the hidden frame. When complete, the hidden frame's page calls window.parent.handleUploadResponse(...); which calls the handleUploadResponse() function on the parent page that initiated the upload.

Answer 6

use jquery form plugin for the upload functionality (http://www.malsup.com/jquery/form/) use ( http://www.fyneworks.com/jquery/multiple-file-upload/) for the ability to specify multiple files to upload

this is how it works, the form plugin lets you post data to a page without refreshing, the multi file plugin lets you specify multiple files by browsing for them.

<form id="uploadForm" enctype="multipart/form-data" method="post" action="FileHandler.ashx">
<input type="hidden" value="100000" name="MAX_FILE_SIZE"/>
File:
<input type="file" name="file"/>
<input type="submit" value="Submit"/>
</form>

so basically the above little html submits to FileHandler.ashx, whatever's in the input box (hopefully), add an HTTP handler in ur asp project, little code below

<%@ WebHandler Language="C#" Class="FileHandler" %>

using System;
using System.Web;
using System.IO;

public class FileHandler : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
string strFileName = Path.GetFileName(context.Request.Files[0].FileName);
string strExtension = Path.GetExtension(context.Request.Files[0].FileName).ToLower();
string strSaveLocation = context.Server.MapPath("Upload") + "" + strFileName;
context.Request.Files[0].SaveAs(strSaveLocation);

context.Response.ContentType = "text/plain";
context.Response.Write("success");
}

public bool IsReusable
{
get
{
return false;
}
}
}

all thats missing from here is including the js scripts on ur aspx page, i think :) good luck

Answer 7

You can use Jquery for that.

For detail check out this link: http://www.uploadify.com/

Answer 8

http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/AsyncFileUpload/AsyncFileUpload.aspx