Question

我有这个上传脚本和循环中的表单..这一切都有效，但document.getElementById(div_id).innerHTML = "Uploading...";仅适用于第一次迭代可以帮助吗？

<script language="Javascript">
function fileUpload(form, action_url, div_id) {
    // Create the iframe...
    var iframe = document.createElement("iframe");
    iframe.setAttribute("id", "upload_iframe");
    iframe.setAttribute("name", "upload_iframe");
    iframe.setAttribute("width", "0");
    iframe.setAttribute("height", "0");
    iframe.setAttribute("border", "0");
    iframe.setAttribute("style", "width: 0; height: 0; border: none;");

    // Add to document...
    form.parentNode.appendChild(iframe);
    window.frames['upload_iframe'].name = "upload_iframe";

    iframeId = document.getElementById("upload_iframe");

    // Add event...
    var eventHandler = function () {

            if (iframeId.detachEvent) iframeId.detachEvent("onload", eventHandler);
            else iframeId.removeEventListener("load", eventHandler, false);

            // Message from server...
            if (iframeId.contentDocument) {
                content = iframeId.contentDocument.body.innerHTML;
            } else if (iframeId.contentWindow) {
                content = iframeId.contentWindow.document.body.innerHTML;
            } else if (iframeId.document) {
                content = iframeId.document.body.innerHTML;
            }

            document.getElementById(div_id).innerHTML = content;

            // Del the iframe...
            setTimeout('iframeId.parentNode.removeChild(iframeId)', 250);
        }

    if (iframeId.addEventListener) iframeId.addEventListener("load", eventHandler, true);
    if (iframeId.attachEvent) iframeId.attachEvent("onload", eventHandler);

    // Set properties of form...
    form.setAttribute("target", "upload_iframe");
    form.setAttribute("action", action_url);
    form.setAttribute("method", "post");
    form.setAttribute("enctype", "multipart/form-data");
    form.setAttribute("encoding", "multipart/form-data");

    // Submit the form...
    form.submit();

    document.getElementById(div_id).innerHTML = "Uploading...";
}
</script>

<!-- index.php could be any script server-side for receive uploads. -->
<form>
<input type="file" name="myFile" /></br>
  <input type="hidden" name="fid"  readonly value="<?php  echo $fid;?>"> 
    <input type="hidden" name="numerolinha"  readonly value="<?php  echo $loader;?>"> 
     <input type="hidden" name="contador"  readonly value="<?php  echo $id_postt1."linha_".$events[0];  ?>">
<input type="button" value="upload" class="button white small"
        onClick="fileUpload(this.form,'http://www.toppromomkt.com/wp-content/themes/toppromo/wallet_upload.php','upload'); return false;" >
<div id="upload"></div>
</form></div>

Answer 1

每个循环都会创建一个id为“upload”的div。

然后调用fileUpload，它会找到其中一个（div列表中的第一个），id为'upload'，并将内部html设置为'Uploading ...'但是div仍然存在，并且仍然存在'upload'，因此在下一次上传时，它将设置相同（第一个）div的内部html。

您需要为每个div提供唯一标识符。

for ( $i = 0; $i < $totalForms; $i++ ){
    ?>
    ...
    <input type="button" value="upload" class="button white small"
    onClick="fileUpload(this.form,'http://www.toppromomkt.com/wp-content/themes/toppromo/wallet_upload.php','upload<?php echo $i ?>'); return false;" >
<div id="upload<?php echo $i ?>"></div>
    ...
    <?php
}

Answer 2

如果你让php重复输入这个表单几次，你就会重复

<div id="upload"></div>

但是id必须在DOM中是唯一的

document.getElementById(div_id).innerHTML = "Uploading...";

无效。破坏的DOM通常会导致混淆的JS错误并将浏览器发送到squirk模式，这使得很难预测相应访问者的体验。

当你遍历循环时，每次循环时都会为标记创建一个唯一的ID

while( $i < 10){
/*###### everything esle in the loop */
 $i++; $divID = 'myID'.$i; 
echo '<div id="'.$divID.'"></div>'; 
}

脚本仅在第一次工作（id重复）

2 个答案: