asp.net mvc에서 jquery 양식 플러그인을 사용하여 업로드하는 동안 gif 이미지를 표시하는 방법

Question

jquery 양식 플러그인을 사용하여 파일 업로드

$(function() { 

     $("#Form").ajaxForm({ 
      iframe: true, 
      dataType: "json", 
      url: "Upload/Index", 
      success: function(result) { 
       $('#MyGrid').append('<tr><td><a href="#">result</a></td></tr>'); 

      }, 
      beforeSubmit: function() { 

      }, 
      error: function(response) { 
       alert('error'); 
      } 
     }); 
    }); 

<form id="Form" method="post" enctype="multipart/form-data"> 
<br /> 
    <input type="file" name="addedFile" id="addedFile" /> 
    <br /> 
<input type="submit" id="submit" value="submit" runat="server" /> 
</form> 

이제 사용자가 클릭하여 GIF 이미지를로드하는 방법을 보여줍니다. 내가 어떻게 할 수 있지.

감사합니다.

michaeld

Answer 1

michaeld는 (나는 이것이 beforeSubmit 기능에 갈 것이라고 가정) :

이

// doesn't have to be added to the body; 
// wherever you want it is cool 
$('<img id="loadingGif" src="path/load.gif" />').appendTo('body'); 

그럼 당신은 그냥 CSS를 사용할 수 있습니다 그것을 절대적으로 또는 다른 무엇을하고 싶은지 결정하십시오.

그런 다음, error 또는 success에, 당신은 이미지를 제거 할 수 있습니다

$('#loadingGif').remove(); 

당신은 그것을 좀 더 효율적인에만 DOM에서 추가/제거 간단히 한 번 요소를 구축하고,로 만들 수를하지만, 이것은 기본적인 출발점입니다.

Answer 2

페이지에 절대적으로 위치한 컨테이너를 배치하고 필요할 때마다 표시하거나 숨길 수 있습니다.

루킹 demo.

여기에는 스타일을 수정할 수있는 요구 사항에 따라 이미지를 바꿀 수있는 텍스트를 사용하고 있습니다.

마크 업

<div class="loading"> 
    <br /><br /> 
    <div>Loading...</div> 
</div> 

CSS는

.loading{ 
    width:200px; 
    height:100px; 
    background:#ccc; 
    font-weight:bold; 

} 
.loading div{ 
    margin: auto 0px; 
    text-align:center; 
    vertical-align:middle; 
} 

JS

function showLoading(){ 
    var $loading = $(".loading"); 
    var windowH = $(window).height(); 
    var windowW = $(window).width(); 

    $loading.css({ 
    position:"fixed", 
    left: ((windowW - $loading.outerWidth())/2 + $(document).scrollLeft()), 
    top: ((windowH - $loading.outerHeight())/2 + $(document).scrollTop()) 
    }).show(); 
} 

function hideLoading(){ 
    $(".loading").hide(); 
} 


$(function() { 

     showLoading(); 

     $("#Form").ajaxForm({ 
      iframe: true, 
      dataType: "json", 
      url: "Upload/Index", 
      success: function(result) { 
       hideLoading(); 
       $('#MyGrid').append('<tr><td><a href="#">result</a></td></tr>'); 

      }, 
      beforeSubmit: function() { 

      }, 
      error: function(response) { 
       hideLoading(); 
       alert('error'); 
      } 
     }); 
    }); 

Answer 3

당신이 jQuery의 blockUI 페이지를 사용할 수 있습니다 루긴. reference.

$(function() { 

     $("#Form").ajaxForm({ 
      iframe: true, 
      dataType: "json", 
      url: "Upload/Index", 
      success: function(result) { 
       $('#MyGrid').append('<tr><td><a href="#">result</a></td></tr>'); 
        $.unblockUI(); 
      }, 
      beforeSubmit: function() { 
       $.blockUI({ 
        message: $('#displayBox'), 
        css: { 
         top: ($(window).height() - 400) /2 + 'px', 
         left: ($(window).width() - 400) /2 + 'px', 
         width: '400px' 
       } 
      }, 
      error: function(response) { 
       alert('error'); 
      } 
     }); 
    });