2012-08-31 6 views
0

성공적인 업로드 또는 파일에 대해 아약스를 통해 메시지를 반환하는 작은 아약스 업로드 스 니펫입니다. upload.php에서 Iis 어디 양식 페이지로 반환되는 메시지를 포함하는 div 있습니다. divs/messages가 페이지 자체로 돌아 오는 대신 모달 창으로 반환되도록 수정하는 방법을 궁금합니다. 누군가가 나를 도와 줄 수 있기를 바랍니다. 어딘가에서 jquery UI를 사용해야합니까? 고마워, 얘들 아!AJAX 메시지를 Jquery를 통해 모달 창으로 반환

 $j(document).ready(function(){ 
var upload = new AjaxUpload('#userfile', { 
     //upload script 
     action: '/modules/mod_artuploader/upload.php', 
     onSubmit : function(file, extension){ 
     //show loading animation 
     //$j("#loading").show(); 
     //check file extension 
     if (! (extension && /^(jpg|png|jpeg|gif)$/.test(extension))){ 
     // extension is not allowed 
      $j("#loading").hide(); 
      $j("<span class='error'>Error: Not a valid file extension</span>").appendTo("#file_holder #errormes"); 
      // cancel upload 
     return false; 
      } else { 
       // get rid of error 
      $j('.error').hide(); 
      } 
      //send the data 
      upload.setData({'file': file, 'userid': <?php echo $user->id?> }); 
     }, 
     onComplete : function(file, response){ 
     //hide the loading animation 
     $j("#loading").hide(); 
     $j("#userfile").hide(); 
     $j('label[for="userfile"]').hide(); 
     //add display:block to success message holder 
     $j(".success").css("display", "block"); 
     $j(".picture").css("display", "block"); 
     //This lower portion gets the error message from upload.php file and appends it to our specifed error message block 
     //find the div in the iFrame and append to error message  
     var oBody = $j(".iframe").contents().find("div"); 
     //add the iFrame to the errormes td 
     $j(oBody).appendTo("#file_holder #errormes"); 

} 
    }); 
}); 
     </script> 

답변

0

정말 모달에 사용하는 항목에 따라 다릅니다. 분리 된 브라우저 창, 분리 된 창 또는 새 탭에 대해 이야기하는 경우 해결해야 할 매우 복잡한 문제입니다. 당신이 그것을 가져 왔기 때문에, jQuery UI 대화 상자는 훌륭한 선택입니다. modal form 예제를 살펴보십시오. 사용자는 파일 선택기로 모달 팝업을 활성화하는 '업로드'버튼을 클릭 할 수 있습니다. 대화 상자의 표시를 $(foo).dialog('open')$(foo).dialog('close')으로 토글 할 수 있습니다. 그런 다음 업로드 스크립트는 대화 상자에 살며 여기에있는 요소와 상호 작용할 수 있습니다. 적어도, 귀하의 콜백은 appendTo가있는 대화 상자를 호출 할 수있을 것입니다. 결국 당신이해야 할 일은 업로드를위한 하나의 대화 상자를 열어 응답을 기다린 다음 닫고 결과로 다른 대화 상자를 여는 것입니다.

관련 문제