如何在 ASP MVC 中上传文件时显示预加载器答案

【问题标题】：How to display preloader while uploading file in ASP MVC如何在 ASP MVC 中上传文件时显示预加载器
【发布时间】：2011-09-20 20:06:10
【问题描述】：

我已经实现了图像上传，但在上传文件时找不到显示动画 gif 图像的方法。到目前为止我得到了什么：

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

我现在添加了 jquery 表单插件，它可以工作了。上传选定的图像我显示/隐藏预加载器图像。

我只需要在上传完成后返回视图或上传的图像以显示它...... 我从控制器返回视图，但上传后没有任何反应。

 $(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();
                }
            });
        });

【问题讨论】：

视图在成功处理程序的结果中返回给您

标签： asp.net-mvc jquery-ui jquery asp.net-ajax

【解决方案1】：

您可以使用 jQuery 异步发布表单并在等待调用返回时显示动画 gif。

$('form').submit(function () {
    $(this).before('<img src="loader.gif" alt="Loading..." />');

    // code to submit the form

    return false;
});

编辑：当视图在成功处理程序中返回时，如果您例如返回一个<img>标签和上传图片的url，你可以使用jQuery来显示它：

$('body').append(result);

【讨论】：