How to display preloader while uploading file in ASP MVC - asp.net-mvc

Question

I have implemented image upload but can't find a way to display some animated gif image while uploading files. Here what I got so far:
<form method="post" action="/Images/Upload" enctype="multipart/form-data">
<input type="file" multiple name="ImageUploaded">
<input type="submit">
</form>
[HttpPost]
public ActionResult Upload()
{
for (int i = 0; i < Request.Files.Count; i++)
{
HttpPostedFileBase hpf = Request.Files[i] as HttpPostedFileBase;
if (hpf.ContentLength == 0)
continue;
string savedFileNameThumb = Path.Combine(
AppDomain.CurrentDomain.BaseDirectory,
"Content", "Images", "Thumb",
Path.GetFileName(hpf.FileName));
string savedFileName = Path.Combine(
AppDomain.CurrentDomain.BaseDirectory,
"Content", "Images", "Full",
Path.GetFileName(hpf.FileName));
ImageModel.ResizeAndSave(savedFileNameThumb, hpf.FileName, hpf.InputStream, 80, true);
ImageModel.ResizeAndSave(savedFileName, hpf.FileName, hpf.InputStream, int.MaxValue, false);
}
return View();
}
I added now jquery form plugin and it works. Selected images are uploaded I show/hide preloader image.
I just still need to return view or uploaded image to display it after upload finish...
I return view from controller but nothing happens after upload.
$(function () {
$("#Form").ajaxForm({
iframe: true,
dataType: "html",
url: "/Images/Upload",
success: function (result) {
$('#loadingGif').remove();
},
beforeSubmit: function () {
$('<img id="loadingGif" src="../../Content/loader.gif" />').appendTo('body');
},
error: function (response) {
alert(response);
$('#loadingGif').remove();
}
});
});

Answer 1

you can use jQuery to post the form asynchronously and display an animated gif while you wait for the call to return.
$('form').submit(function () {
$(this).before('<img src="loader.gif" alt="Loading..." />');
// code to submit the form
return false;
});
EDIT:
When the view is returned in the success handler, if you e.g. return an <img> tag with the url of the uploaded image, you can use jQuery to display it:
$('body').append(result);