2011-09-20 44 views
0

我已经实现了图片上传,但无法找到上传文件时显示一些动画gif图片的方法。这里我到目前为止:如何在ASP MVC中上传文件时显示预加载器

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

认为在成功处理程序 – Rickard

回答

0

您可以使用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); 
+0

我已经更新问题将结果返回给你。 – 1110