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

问题

I have a html form used to upload file to the server. For brevity, I have only shown the essential 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>

I use jQuery.submit() to submit the form:

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

Business logic is Slim PHP : $app->post('/upload', 'uploadFile'); ....

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

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

       }
    }

Issue: If the upload fails for some reason, an exception is thrown, user is taken to a PHP error page. If upload was completed without exception, the application is redirected to main page.

What is required is: if the upload succeeds the application should be redirected to main-page as it does now...but if there was any exception thrown, instead of going to PHP error page, the application should stay on upload page and with id = 'response' should display exception.

Is it possible to do anything like this with jQuery submit():

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

????

I know JQuery upload file plugins would make life easier...but that is not an option for me...

Thanks for any pointers!

Is it possible

回答1:

You need to use ajax here is example for file upload using ajax

Sending multipart/formdata with jQuery.ajax

with out ajax you can redirect back user and send error text by GET method and put this text in response tag

回答2:

I had a similar issue in the past, what I've come up with is to use an invisble iframe to post the file upload and get the html result back, hope this helps!

回答3:

I think this is what you are looking for

html code:

<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>

i added an hidden iframe and made the target of the form the id of the iframe. This will make the form submit into the iframe so the whole page won't reload

javascript code:

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


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

i added a global function named showUploadError which will be called from the php upload function in case of the error

php code

<?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
   }
}

if the upload is successfull we output some javascript code which will redirect the parent page (main page) to the new location, otherwise it will call the showUploadError javascript function.

Keep in mind this is a crude example and i haven't tested it.

回答4:

The option you have is to send the "submit" to a "iframe", then with "js" get the response. In PHP you send a message which is then interpreted in "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
}

来源：https://stackoverflow.com/questions/11955589/jquery-submit-upload-form-display-response-returned-by-slim-php