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

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：$app->post('/upload'，'uploadFile')；

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

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

       }
    }

问题：如果由于某种原因上传失败，将引发异常，用户将被带到PHP页面。如果上载没有例外地完成，应用程序将被重定向到主页。

所需要的是：，如果上传成功，应用程序应该被重定向到主页面，如果有任何异常抛出，应用程序应该被重定向到now...but，而不是转到PHP页面，应用程序应该停留在上传页面上，并且id = 'response‘应该显示异常。

是否可以在jQuery submit()中执行这样的操作：

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

？

我知道JQuery上传文件插件会使生活easier...but对我来说不是一种选择.

谢谢你的指点！

有没有可能

Answer 1

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

Sending multipart/formdata with jQuery.ajax

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

Answer 2

我在过去也有过类似的问题，我想出的是用一个失败的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代码，将父页面(主页)重定向到新位置，否则它将调用showUploadError javascript函数。

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