I am trying to upload a file to the server without refreshing page on completion. I currently managed to solve the upload part using XMLHttpRequest to the Generic Handler (.ashx). However I cannot find the solution to prevent it from refreshing, tried using event.preventDefault() and return false; on the ajax but it doesn't work.
The ajax script
$('#uploadFileButton').on('click', function (event) {
var counter;
function UploadFile() {
var files = $("#<%= file1.ClientID %>").get(0).files;
counter = 0;
// Loop through files
for (var i = 0; i < files.length; i++) {
var file = files[i];
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "FileUploadHandler.ashx");
ajax.send(formdata);
}
}
function progressHandler(event) {
var percent = (event.loaded / event.total) * 100;
$("#progress").html(Math.round(percent) + "% uploaded... please wait");
}
function completeHandler(event) {
counter++
$("#progress").html(counter + " " + event.target.responseText);
}
function errorHandler(event) {
$("#progress").html("Upload Failed");
} function abortHandler(event) {
$("#progress").html("Upload Aborted");
}
});
The FileUploadHandler.ashx
public class FileUploadHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
HttpPostedFile file = context.Request.Files[0];
string fname = context.Server.MapPath("~/Document/" + file.FileName);
file.SaveAs(fname);
context.Response.ContentType = "text/plain";
context.Response.Write("File Uploaded Successfully!");
}
public bool IsReusable
{
get
{
return false;
}
}
}
And in case you need it, the index.aspx body
<body>
<form id="form1" runat="server">
<asp:FileUpload ID="file1" runat="server" AllowMultiple="true"/>
<button id="uploadFileButton">Upload</button>
<div id="progress">
</div>
</form>
</body>
Anyone care to shed light on how to solve this?
Use event.preventDetault() inside button click event. You have to call UploadFile() function inside button click event.