jQuery .submit(）上传表单显示响应由 Slim PHP 返回

我有一个用于将文件上传到服务器的html表单。为简洁起见，我只展示了基本部分

 <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->post（'/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 submit（）做这样的事情：

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

????

我知道 JQuery 上传文件插件会让生活更轻松......但这对我来说不是一个选择...

感谢您的任何指示！

可能吗

你需要使用

ajax 这是使用 ajax 上传文件的示例

使用 jQuery.ajax 发送多部分/表单数据

如果没有 ajax，您可以通过 GET 方法重定向回用户并发送错误文本，并将此文本放在响应标记中

我过去遇到过类似的问题，我想出的是使用隐形的 iframe 发布文件上传并返回 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 upload 函数调用

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代码，这些代码会将父页面（主页）重定向到新位置，否则它将调用showUploadError javascript函数。

请记住，这是一个粗略的例子，我还没有测试过它。

您的选择是将"提交"发送到"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
}

jQuery .submit(） 上传表单显示响应由 Slim PHP 返回

jQuery .submit() upload form display response returned by Slim PHP