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);