javascript - <输入>不会更新

Question

我的代码使用隐藏的 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 张图像。为此，页面不会重新发布到网络服务器(我通过使用隐藏的 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”在网页上正确更新的原因是我需要将“所选图像”设置为新上传的图像。

Answer 1

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

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

请以后使用浏览器的开发者工具来检查动态变化，并且为了我们的利益，请不要使用 iframe 进行“ajax”。