Question

我已经实现了图片上传，但在上传文件时找不到显示动画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();
                }
            });
        });

Answer 1

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

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

    // code to submit the form

    return false;
});

编辑：在成功处理程序中返回视图时，如果您是使用上传图片的网址返回<img>标记，您可以使用jQuery显示它：

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

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

1 个答案: