如何在ASP MVC中上傳文件時顯示預加載器

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表單插件，它的工作原理。選定的圖像上傳我顯示/隱藏preloader圖像。

我只是還需要返回查看或上傳的圖像，以顯示它上傳完成後... 我從控制器返回視圖，但上傳後沒有任何反應。

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