0

我使用隐藏的 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 变量，并且它有一个尾随 /script 阻止我的最后一行代码，'echo outStr '，从执行和显示图像：

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

1 回答 1

0

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

于 2014-01-22T02:54:28.843 回答