2

我的问题是我使用 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文档对象的旧副本。

或者是其他东西?

4

1 回答 1

0

解决方案是 DOM 正在被缓冲(“保留”),我不得不强制为我的页面更新 DOM。我这样做的方法是在这个 SO 帖子上遵循答案 #3:在 javascript dom 操作后强制 Internet Explorer 中的 DOM 刷新中的
“强制 DOM 刷新”

请注意,我在 Firefox 中开发,上述解决方案在 Firefox 中也可以正常工作。

于 2013-10-06T00:52:56.300 回答