0

我的代码使用隐藏的 iframe 上传，然后在我的网页上最多显示 4 张照片。

下面的代码将当前图像的计数加 1，以跟踪已上传的图像数量。当我尝试将此值存储到“thumbImageCount”（我的网页上的一个简单输入控件）中时，输入控件的值不会更新。

下面 PHP 代码中出现“parDoc”的原因是——所有这些 PHP 代码都发生在我网页的隐藏 iframe 中，我需要更新 iframe 的父文档，即我的网页的文档对象，而不是 iframe 的文档（我以 Ajaxie 的方式使用“隐藏 iframe”技术）：

 echo '<script type="text/javascript">'."\n";
 echo 'var parDoc = parent.document;' . "\n";

 $curImageCount = $curImageCount + 1;
 $outStr = "parDoc.getElementById('justOpenedImage').innerHTML = '<div><img id=\'editImage\' class=\'normSizeImg\' src=\'$fullImagePath\' /></div>';";
 $outStr3 = "\n parDoc.getElementById('picture_path_hidden').value = '" . $fullImagePath . "';";
 $outStr4 = "\n parDoc.getElementById('" . $thumbWindowName . "').src = '" . $fullImagePath . "';";
 $outStr5 = "\n parDoc.getElementById('" . $thumbWindowName . "').style.display = 'inline-block';";
 $outStr6 = "\n parDoc.getElementById('thumbImageCount').value = '" . $curImageCount . "';";
 $outStr7 = "\n alert('photoPreview.php, the new image count (aka curImageCount) is: " . $curImageCount . "');";
 echo $outStr;  
 echo $outStr3;  
 echo $outStr4;  
 echo $outStr5;  
 echo $outStr6;  
 echo $outStr7;  
 echo "\n".'</script>';

请注意，在outStr7中，iframe 在父（我的网页）文档上放置了一个“警报”框。那个警报告诉我图像计数已成功增加。

请注意，在outStr6中，我将相同的图像计数保存到 id 为“thumbImageCount”的输入元素中。

所以在我看来，由于 outStr7 中的警报框（位于 outStr6之后）显示了正确的新增量图像计数，因此我页面上的“thumbImageCount”输入控件也应如此。

它没有。这是我网页上“thumbImageCount”的 html：

 <input id="thumbImageCount" name="thumbImageCount" type="hidden" 
                                 value="<?php echo $imageCount ?>" />

我的网页允许上传和显示 4 张图片。为此，页面不会重新发布到 Web 服务器（我通过使用隐藏的 iframe 技术来避免这种情况）。

因此，尽管您在上面注意到，我将thumbImageCount输入控件的 html 标记中的初始值设置为一个名为“imageCount”的 PHP 变量，该变量为 0（零）——因为我的网页只加载一次，所以该输入控件的值，在被 PHP 变量初始化为零 (0) 之后，应该可以通过我隐藏的 iframe 的 PHP 代码的这一行从上面更新：

 $outStr6 = "\n parDoc.getElementById('thumbImageCount').value = '" . $curImageCount . "';";

但它没有发生。加载 4 张图片后，我在网页上执行“查看页面源代码”以查看“thumbImageCount”输入控件是否已更新为值 4，这就是我所看到的：

 <input id="thumbImageCount" name="thumbImageCount" type="hidden" 
                                 value="0" />

因此，如果您查看上面我的 PHP 代码中的所有“outStrs”，所有这些都在工作——图像在我的网页上看起来很好。只有 outStr6 失败。

我在这里想念什么？我需要在我的网页上正确更新“thumbImageCount”的原因是我需要将“选定图像”设置为新上传的图像。

4

3 回答 3

2

您的代码没有任何根本错误。如果您的输入没有隐藏，您会看到它的值已更改。

G

但是，您不会通过“查看页面源代码”看到代码更改，因为源代码不会动态更改 - 它在内存中的“副本”（称为 DOM）会发生变化。

请在未来使用浏览器的开发人员工具检查动态变化，为了我们的利益，请不要使用 iframe 执行“ajax”。

于 2013-10-05T18:12:11.697 回答
0

此处未找到解决方案；我不得不重新发布并重新构建这个问题，我在： 文档更新但 getElementById() 返回不正确的值？

最终问题是由缓冲的页面 DOM 引起的，解决方案是强制 DOM 更新，以便 getElementById() 检索 thumbImageCount输入元素的更新状态。显然，当页面上的某些内容被修改时，DOM 不会立即更新，我不得不强制它更新，这在上面链接的新帖子中有所描述。

于 2013-10-06T00:57:17.833 回答
0

我只想添加到@Brian 的答案，并就您的代码输出提出建议。按原样输出代码不是必需的，也不是一个好主意。我建议使用多行如下：

echo <<<END
<script type="text/javascript">
     var parDoc = parent.document;
     parDoc.getElementById('justOpenedImage').innerHTML = '<div><img id=\'editImage\' class=\'normSizeImg\' src=\'$fullImagePath\' /></div>';
     parDoc.getElementById('picture_path_hidden').value = '$fullImagePath';
     parDoc.getElementById('$thumbWindowName').src = '$fullImagePath';
     parDoc.getElementById('$thumbWindowName').style.display = 'inline-block';
     parDoc.getElementById('thumbImageCount').value = '$curImageCount';
     alert('photoPreview.php, the new image count (aka curImageCount) is: $curImageCount');
</script>
END;

这看起来更干净，更容易阅读。如果它们不是变量，请记住要转义$它们，尽管这似乎不是问题。

于 2013-10-05T18:25:42.320 回答