How is this PHP/IFRAME file upload working?

Question

How is the code working out? I mean the src attribute of IFRAME is set to # then how does upload.php get to know that the form was submitted?

Here is the code : `index.php` :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Max's AJAX File Uploader</title>
   <link href="style/style.css" rel="stylesheet" type="text/css" />

<script language="javascript" type="text/javascript">
<!--
function startUpload(){
      document.getElementById('f1_upload_process').style.visibility = 'visible';
      document.getElementById('f1_upload_form').style.visibility = 'hidden';
      return true;
}

function stopUpload(success){
      var result = '';
      if (success == 1){
         result = '<span class="msg">The file was uploaded successfully!<\/span><br/><br/>';
      }
      else {
         result = '<span class="emsg">There was an error during file upload!<\/span><br/><br/>';
      }
      document.getElementById('f1_upload_process').style.visibility = 'hidden';
      document.getElementById('f1_upload_form').innerHTML = result + '<label>File: <input name="myfile" type="file" size="30" /><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><\/label>';
      document.getElementById('f1_upload_form').style.visibility = 'visible';      
      return true;   
}
//-->
</script>   
</head>

<body>
       <div id="container">
            <div id="header"><div id="header_left"></div>
            <div id="header_main">Max's AJAX File Uploader</div><div id="header_right"></div></div>
            <div id="content">
                <form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
                     <p id="f1_upload_process">Loading...<br/><img src="loader.gif" /><br/></p>
                     <p id="f1_upload_form" align="center"><br/>
                         <label>File:  
                              <input name="myfile" type="file" size="30" />
                         </label>
                         <label>
                             <input type="submit" name="submitBtn" class="sbtn" value="Upload" />
                         </label>
                     </p>

                     <iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
                 </form>
             </div>
             <div id="footer"><a href="http://www.ajaxf1.com" target="_blank">Powered by AJAX F1</a></div>
         </div>

</body>   
</html>

`upload.php` :

<?php
   // Edit upload location here
   $destination_path = getcwd().DIRECTORY_SEPARATOR;

   $result = 0;

   $target_path = $destination_path . basename( $_FILES['myfile']['name']);

   if(@move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
      $result = 1;
   }

   sleep(1);
?>

<script language="javascript" type="text/javascript">window.top.window.stopUpload(<?php echo $result; ?>);</script>

mvbrakel · Accepted Answer · 2013-02-03 11:40:19Z

3

The flow in this code is pretty simple if you follow the HTML form tag an it's related attributes. What is happening is the follwing:

Select upload
Submit form
The onSubmit() triggers a JS function which enables the loading.. visualization and disables the upload form. Because of the * return true* the form is still submitted.
The form submit is done into the iFrame because of the 'target=' attribute. With that action you make the iFrame source 'upload.php'
Upload.php is called from within the iFrame.
The Upload.php result calls the main window JS function 'stopUpload' which informs on the rest of actions to take.

This script will work although it's result might change cross browser. This is a good script for a fast AJAX upload implementation.

answered Feb 3, 2013 at 11:40

mvbrakel

9465 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Natalia Over a year ago

I'd like to try this out, but I can't figure out - if you add another text field, checkboxes and so on, where does it say what file to submit the form to? For example, I have a file "put_form_results_in_the_database.php" and I want after the file upload submit the form results to that file. Where do I specify that?

Shridhar · Accepted Answer · 2013-02-03 11:35:28Z

1

You have form action set to upload.php <form action="upload.php" hence when you submit upload.php knows form is submitted (if i understand your question correctly then above line is true)

answered Feb 3, 2013 at 11:35

Shridhar

1661 silver badge5 bronze badges

1 Comment

ShuklaSannidhya Over a year ago

oops... silly thing should have read the code properly... my bad.. thanks for your help...

Collectives™ on Stack Overflow

How is this PHP/IFRAME file upload working?

Here is the code : `index.php` :

`upload.php` :

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Here is the code : index.php :

upload.php :

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related

Here is the code : `index.php` :

`upload.php` :