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) - 这里是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_preview div中看到了progressbar.gif，但没有看到上传的图片。

这应该有用，可能是我没有看到的简单的事情，我已经在这里工作了10个小时。

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

编辑：我修复了这个问题。这是我的问题的原因，我的showAlertBox（）辅助函数，当我调试我的PHP代码时，它将PHP变量吐出到浏览器，它有一个尾随/脚本阻止了我的最后一行代码'echo outStr '，从执行和显示图像：

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

Answer 1

我固定了它。我有一个额外的'script'标签，在我最后的'echo outStr'语句之前过早地关闭了javascript代码。它没有出现在我的代码中，因为它来自我在所有PHP开发中使用的名为showAlertBox（）的'helper'函数，用于在浏览器窗口中显示php变量的值 - 我的showAlertBox（）使用带有开头的javascript 'script'，'alert（somePHPvariable）'然后是一个关闭'脚本' - 并且'关闭'我的最终'echo outStr'代码行，它应该显示图像。我摆脱了我的showAlertBox（）调用，瞧它工作

iframe不会显示图片

1 个答案: