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

Question

我有一个用于将文件上传到服务器的 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();

业务逻辑是 Slim 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 上传文件插件会让生活更轻松...但这不是我的选择...

感谢您的指点！

可以吗

Answer 1

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

Sending multipart/formdata with jQuery.ajax

不使用 ajax，您可以重定向回用户并通过 GET 方法发送错误文本并将此文本放入响应标签中

Answer 2

您可以选择将“提交”发送到“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
}

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

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

Answer 4

我过去也遇到过类似的问题，我想出的是使用一个不可见的 iframe 来发布文件上传并返回 html 结果，希望这会有所帮助！