我的问题是我使用 PHP(见下文)成功地增加了在我的网页上的“输入”元素中显示的计数——但在我的 javascript 中我无法检索增加的值——我得到了旧的未增加的数字。
我将表单发布到隐藏的 iframe 并且 iframe 的 PHP 代码更新了我页面上的输入控件——这里的代码来自loadImages.php:
<form style="display: inline-block" name="pictureForm" method="post"
autocomplete="off" enctype="multipart/form-data">
<input type="file" name="picture" id="picture"
onchange="return bkgdFileUpload(this);" style="display: inline-block"/>
<input id="thumbImageCount" name="thumbImageCount" style="border: 2px solid red"
value="<?php echo $imageCount ?>" />
</form>
页面加载时,上面的“imageCount”PHP 变量赋值为 0。请注意,当用户选择图像文件时,函数bkgdFileUpload(this)会被调用(在此处传递 'this' 是否也会将当前 DOM 'document' 对象传递给该 bkgdFileUpload() 函数?我在下面提出这个可能的原因对于我的问题)。
这是bkgdFileUpload()函数:
function bkgdFileUpload(upload_field)
{
var currentImageCount = document.getElementById('thumbImageCount').value;
// THIS alert BOX SAYS THE currentImageCount IS ZERO (which is correct)
alert("The currentImageCount is: " + currentImageCount);
// THIS POSTS THE FORM -- NOTE THE 'action' FILE AND THE 'target'
upload_field.form.action = 'photoPreview.php';
upload_field.form.target = 'upload_iframe';
upload_field.form.submit();
// I know for a fact that before the next bit of code executes, the form
// has been fully processed because my web page suddenly shows the 'count'
// increase on my web page *before* the "alert()" box below appears
// AFTER THE FORM FINISHES BEING PROCESSED, I CHECK IF THE 'imageCount'
// HAS BEEN UPDATED -- BUT IT IS STILL ZERO, *DESPITE* THE FACT THAT
// THE "thumbImageCount" CONTROL DISPLAYS A "1" !!
var newImageCount = document.getElementById('thumbImageCount').value;
alert("The newImageCount is:" + newImageCount);
}
您注意到我将此表单的目标设置为 DOM 元素“upload_iframe”,它与上面的代码在同一个loadImages.php文件中——这是 iframe 标记
<iframe name="upload_iframe" id="upload_iframe"
style="display:block; border: 2px solid red"></iframe>
所以表单的“目标”是一个 iframe;处理表单的文件称为photoPreview.php
当表单的 PHP 代码在表单被 POST 时执行时,我的 PHP 代码会增加图像的计数(除其他外)。这是在photoPreview.php中处理上述表单的 PHP 代码:
if(isset($_POST['thumbImageCount']))
{
$curImageCount = $_POST['thumbImageCount'];
$newImageCount = $curImageCount + 1;
echo '<script type="text/javascript">'."\n";
// THE FORM'S "target" IS AN IFRAME ON MY WEB PAGE, SO
// GET THE IFRAME'S PARENT DOCUMENT WHICH IS MY WEB PAGE'S
// DOCUMENT OBJECT so I can update that page's "thumgImageCount"
echo 'var parDoc = parent.document;' . "\n";
echo "\n parDoc.getElementById('thumbImageCount').value = '"
. $newImageCount . "';";
echo "\n".'</script>';
exit();
}
您可以查看上面的bkgdFileUpload()函数以了解表单的发布方式:
function bkgdFileUpload(upload_field)
{
var currentImageCount = document.getElementById('thumbImageCount').value;
// THIS alert BOX SAYS THE currentImageCount IS ZERO (which is correct)
alert("The currentImageCount is: " + currentImageCount);
upload_field.form.action = 'photoPreview.php';
upload_field.form.target = 'upload_iframe';
upload_field.form.submit();
// AFTER THE FORM FINISHES BEING PROCESSED, I CHECK IF THE 'imageCount'
// HAS BEEN UPDATED -- BUT IT IS STILL ZERO, DESPITE THE 'imageCount'
// input VALUE SHOWING THE *CORRECT* INCREMENTED VALUE (i.e. the
// web page indicates that before the next 2 lines of code execute,
// the 'thumbImageCount' already correctly displays the incremented number
var newImageCount = document.getElementById('thumbImageCount').value;
alert("The newImageCount is:" + newImageCount);
}
这是(微妙的?)问题。在我的网页上,“thumbImageCount”输入控件(见上文)实际上显示了正确递增 1 的值。我可以看到更新发生在页面上,并且发生在上面的最后两行代码执行之前。
换句话说,上面最后一行代码的 alert() 显示了旧值,我看不到我的网页如何在“thumbImageCount”中显示正确的值,但那个 alert() 仍然显示旧值.
// AFTER THE FORM FINISHES BEING PROCESSED, I CHECK IF THE 'imageCount'
// HAS BEEN UPDATED -- BUT IT IS STILL ZERO EVEN THOUGH THE
// 'thumbImageCount' input ON MY WEB PAGE SHOWS THE CORRECTLY INCREMENTED
// NUMBER
var newImageCount = document.getElementById('thumbImageCount').value;
alert("The newImageCount is:" + newImageCount);
现在,我的运行理论是,不知何故,通过在 html 代码中传递“this”,当调用 bkgdFileUpload() 时,当前 DOM 的副本被推送到调用框架的堆栈和 bkgdFileUpload() 中,即使页面显示正确的值,bkgdFileUpload() 仍然有 DOM文档对象的旧副本。
或者是其他东西?