JQuery.submit () load the form display response returned by Slim PHP

Question

I have an html form used to upload a file to a server. For brevity, I have shown only the main points

<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(); } } 

Problem: If the download fails for some reason, an exception is thrown, the user goes to the PHP error page. If the download is completed without exception, the application is redirected to the main page.

Required: if the download is completed successfully, the application should be redirected to the main page, as it is now ... but if any exception occurs, instead of going to the PHP error page, the application should remain on the download page and with id = 'response' should display an exception.

Is it possible to do something like this using jQuery submit ():

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

????

I know that plugins for downloading jQuery files will make life easier ... but this is not an option for me ...

Thanks for any pointers!

Is it possible

Answer 1

You need to use ajax, here is an example of downloading a file using ajax

Submitting multipart / formdata using jQuery.ajax

using ajax you can redirect the user back and send the error text using the GET method and put this text in the response tag

Answer 2

I had a similar problem in the past, I came up with using an invisble iframe to post the file upload and get the html result, hope this helps!

Answer 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 a hidden iframe and made the iframe identifier the target of the form. This will make the submit form in the iframe so that the whole page does not reload

Javascript code:

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

i added a global function called showUploadError, which will be called from the php load function in case of an 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 download is successful, we output some javascript code that redirects the parent page (main page) to a new location, otherwise it will call the showUploadError javascript function.

Keep in mind that this is a crude example, and I have not tested it.

Answer 4

You have the option to send "send" to the "iframe" and then "js" to get the answer. 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 }