Iframe将不显示图像

我使用隐藏的iframe发布用户从本地磁盘中选择的照片。然后，我尝试在与隐藏iframe相同的页面上的div上显示该图像。它没有在div中显示图像，我花了几个小时处理它

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

当用户选择一个图像文件时，您可以在上面看到我的onchange调用FileUpload(this)——这里是FileUpload（），一个javascript函数：

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

您可以看到，我正在将这个隐藏的iframe发布到photoPreview.php——这是代码：

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

我在picture_previewdiv中看到了进度条.gif，但没有看到上传的图像。

这应该有效，可能是我没有看到的简单的事情，我已经尝试了10个小时了。

此外，在上面的表单中移动iframe也没有任何区别。

编辑：我解决了这个问题。这就是我的问题的原因，我的showAlertBox（）辅助函数，它在我调试PHP代码时向浏览器吐出PHP变量，并且它有一个尾部/脚本，阻止了我的最后一行代码"echo-outStr"执行和显示图像：

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