php - iframe で画像が表示されない

Question

非表示の 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)は、javascript 関数である FileUpload() です。

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_preview div に progressbar.gif が表示されますが、アップロードされた画像は表示されません。

これは機能するはずです。おそらく、私が見ていない単純なものです。私はこれで10時間すべてを試しました。

また、上記のフォーム内で iframe を移動しても、まったく違いはありませんでした。

編集：私はこの問題を修正しました。これが私の問題の原因である showAlertBox() ヘルパー関数で、PHP コードをデバッグしているときに PHP 変数をブラウザーに吐き出し、末尾に /script があり、コードの最終行「echo outStr」を妨げていました。 '、画像の実行と表示から:

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