jQuery .submit（）上傳表單顯示返回Slim PHP的響應

Question

我有一個HTML表單用於上傳文件到服務器。爲了簡便起見，我只顯示必要的peices

<form id='uploadform' method='post' enctype='multipart/form-data' action='index.php/upload'> 
    <input name='myFile' id='myFile' type='file'/> 
</form> 
<input type='button' id='upload' value='Upload'/> 
<div id='response'></div> 

我用jQuery.submit（）來提交表單：

$('#uploadform').submit(); 

業務邏輯苗條PHP： $ APP->後（」/upload'，'uploadFile'）; ....

function uploadFile(){ 
     try{ 
      // if success uploading 
      $app->redirect('/main-page'); 

     }catch(Exception $e){ 
      // if error 
      echo $e->getMessage(); 

     } 
    } 

問題：如果上傳由於某種原因失敗時，會拋出異常，用戶被引導到一個PHP錯誤頁面。如果上傳完成無異常，應用程序將重定向到主頁面。

所需要的是：如果上傳成功的應用程序應該被重定向到因爲它現在......但是，如果有任何異常拋出而不是到PHP錯誤頁面，主頁面，應用程序應該留在上傳頁面上，id ='response'應該顯示異常。

是否有可能做這樣的事與jQuery提交（）：

 $('#uploadform').submit(function(response){ 
      $('response').html(response); 
    }); 

????

我知道的JQuery上傳文件的插件將使生活更輕鬆...但是，這是不是一種選擇，對我來說...

感謝您的指點！

是否有可能

Answer 1

你需要AJAX這裏用的是例如文件上傳使用AJAX

Sending multipart/formdata with jQuery.ajax

用了AJAX可以重定向回用戶，並通過GET方法發送錯誤文本，並把這個文本響應標籤

Answer 2

我在過去也有類似的問題，我已經想出是使用invisble iframe來發布文件的上傳和得到的HTML結果回來了，希望這有助於！

Answer 3

我認爲這是你在找什麼

的html代碼：

<form id='uploadform' method='post' enctype='multipart/form-data' action='index.php/upload' target="hiddeniframe"> 
    <input name='myFile' id='myFile' type='file'/> 
</form> 
<iframe name="hiddeniframe" id="hiddeniframe" style="display: none"></iframe> 
<input type='button' id='upload' value='Upload'/> 
<div id='response'></div> 

我增加了一個隱藏的iframe和製作形式的目標iframe的ID。這將使表單提交到的IFRAME所以整個頁面不會重新加載

javascript代碼：

<script type="text/javascript"> 
    window.showUploadError = function(error) { 
     $('#response').html(error); 
    }; 


    $('#uploadform').submit(); 
</script> 

我添加了一個名爲showUploadError一個全球性的功能，將從PHP上傳功能的情況下，被稱爲錯誤

PHP代碼

<?php 
    function uploadFile(){ 
     try{ 
      // if success uploading 
      ?> 
      <script type="text/javascript"> 
       parent.location.href = '/main-page' 
      </script> 
      <?php 
      die(); 
     }catch(Exception $e){ 
     // if error 
     ?> 
      <script type="text/javascript"> 
       parent.showUploadError('Upload failed'); 
      </script> 
     <?php 
    } 
} 

如果上傳全成我們輸出一些JavaScript代碼，將重定向父頁面（主擴聲ge）到新的位置，否則會調用showUploadError javascript函數。

請記住這是一個粗略的例子，我還沒有測試過。

Answer 4

您擁有的選項是將「提交」發送到「iframe」，然後用「js」獲得響應。在PHP中，您發送一條消息，然後在「JS」中進行解釋。

HTML：

<form id="uploadform" method="post" enctype="multipart/form-data" action="index.php/upload" target="uploadformResponse"> 
    <input name='myFile' id='myFile' type='file'/> 
</form> 
<input type='button' id='upload' value='Upload'/> 
<div id='response'></div> 
<div style="display:none;"> 
    <iframe name="uploadformResponse" id="uploadformResponse"></iframe> 
</div> 

的Javascript：

var runSubmitForm = function() { 

    var 
     $iframe = $('#uploadformResponse'), 
     fnLoadIframe = function(event) { 
     $iframe.unbind('load'); 
     var 
      response = $iframe.contents(), 
      aresponse = response.split('|'); 

     console.log('debug respnse', response); 

     if (aresponse.length != 2) { 
      $('#response').html("Error I ???"); 
     } 

     if (aresponse[0] == '1') { 
      window.location = aresponse[1]; 
     } 
     else if (aresponse[0] == '0') { 
      $('#response').html(aresponse[1]); 
     } 
     else { 
      $('#response').html("Error II ???"); 
     } 
     }; 

    $iframe.bind('load', fnLoadIframe); 
    $('#uploadform').submit(); 
}; 

PHP：

function uploadFile(){ 
    try{ 
     // if success uploading 
     echo '1|/main-page'; 
    } catch(Exception $e) { 
     // if error 
     echo '0|' . $e->getMessage(); 
    } 
    exit; // optional 
}