Iframe will not display image

Question

I use a hidden iframe to post a photo the user selects from their local disk. I'm then trying to display that image on a div on the same page as the hidden iframe. It is not displaying the image in the div and I've spent hours mucking with it.

HERE IS THE HTML:

<iframe name="upload_iframe" id="upload_iframe" style="display:none"></iframe>

<form name="pictureForm" method="post" autocomplete="off" 
            enctype="multipart/form-data">
    <div>
        <span>Upload Picture</span>
        <input type="file" name="picture" id="picture" 
                 onchange="return FileUpload(this);" />

        <!-- this div is where I need the uploaded image to show....-->
        <div id="picture_preview"></div>
    </div>
</form>

When the user selects an image file, you can see above that my onchange calls FileUpload(this) -- here is FileUpload(), a javascript function:

function FileUpload(the_upload_field)
{  
    // show a 'progress bar' image whilst we do the image file upload
    //  -- this works fine.
    document.getElementById('picture_preview').innerHTML 
          = '<div><img src="images/progressbar.gif" border="0" /></div>';

    // now post the image to the server using the hidden iframe
    the_upload_field.form.action = 'photoPreview.php';
    the_upload_field.form.target = 'upload_iframe';
    the_upload_field.form.submit();
    the_upload_field.form.action = '';
    the_upload_field.form.target = '';

    return true;
}

You see that I'm posting this hidden iframe to photoPreview.php -- here is that code:

$upload_dir = 'file-upload/upload/';     // Directory for file storing
$preview_url = 'http://localhost/myWebsite/file-upload/upload/';


// NOTE:  the 'picture' here is the name of the open-file html element above
$filename = $_FILES['picture']['name'];
$targetDirForFile = $upload_dir .  $filename;

// extract the uploaded file and put it into the web server upload folder...
move_uploaded_file($_FILES['picture']['tmp_name'], $targetDirForFile);

// EDIT: this was in my code but forgot to include it here, now done so.
$fullImagePath = $preview_url . $filename; 

// This is PHP code outputing Javascript code.
echo '<script type="text/javascript">'."\n";

//echo 'var parDoc = window.parent.document;';  // didn't work either.
echo 'var parDoc = parent.document;';

// if you look in the html code above, you see that 'picture_preview' 
// used here is a div, and that's where I need the image to appear
$outStr = "parDoc.getElementById('picture_preview').innerHTML = '<div><img src=\'$fullImagePath\' /></div>';";

// display the image to the 'picture_preview' div on the same page as the
// hidden iframe...

// EDIT: THIS WAS THE SOURCE OF MY PROBLEM.  This showAlertBox() is my homemade
// helper function that displays PHP variables to the browser when I'm debugging.
// If you look at my code below for 'showAlertBox()' you see that it prematurely
// was ending the 'javascript' section of the code due to its own final '/script'
// WHEN I COMMENT OUT this call to showAlertBox(), my image now successfully appears.
showAlertBox("the outStr is" . $outStr);


echo $outStr;
echo "\n".'</script>';
exit();

I see the progressbar.gif in the picture_preview div but not the uploaded image.

This should work, probably something simple I'm not seeing, I've been at this for 10 hours trying everything.

Also, moving the iframe inside the form above made no difference at all.

EDIT: I FIXED THIS PROBLEM. Here was the cause of my problem, my showAlertBox() helper function, which spits out PHP variables to the browser when I'm debugging my PHP code, and it has a trailing /script that prevented my final line of code, 'echo outStr', from executing and displaying the image:

 function showAlertBox($messageToDisplay)
 {
     echo '<script type="text/javascript">'
         . 'alert("' . $messageToDisplay . '")</script>';
 }

Answer 1

I FIXED IT. I had an extra 'script' tag that prematurely was closing the javascript code before my final 'echo outStr' statement. It doesn't appear in my code because it comes from a 'helper' function I use called showAlertBox() in all my PHP development to display the values of php variables in the browser window -- my showAlertBox() uses javascript with a beginning 'script', an 'alert( somePHPvariable )' then a closing 'script' -- and that 'shut off' my final 'echo outStr' line of code that was supposed to show the image. I got rid of my showAlertBox() call and voila it works