Javascript .innerHTML 重置我的 <input type="file">

Question

我有一个关于 javascript 中多个文件上传的问题。我正在尝试通过动态添加输入来创建自己的多个文件上传。这一切都很简单，但问题是每当我添加一个新的 时，我以前的“文件”类型的输入字段就会重置。

如果我删除更改父 div 的 innerHTML 的最后几行代码，则 my 的值不会重置。有谁知道这个问题如何解决？JavaScript 代码可以在下面找到。提前致谢。

if(document.getElementById("upload_queue").innerHTML.indexOf(_item) == -1)
{
    var _row = "<tr id='queue_row_" + items_in_queue + "'>";
    _row += "<td>";
    _row += "<div class='remove_uploaded_image' onclick='remove_from_queue(" + items_in_queue + ")'></div>";
    _row += "</td>";
    _row += "<td>";
    _row += _item;
    _row += "</td>";
    _row += "</tr>";

    document.getElementById("upload_queue").innerHTML += _row;
    document.getElementById("upload_image_" + items_in_queue).style.display = "none";

    items_in_queue++;

    document.getElementById("uploader_holder").innerHTML += 
        '<input id="upload_image_' + items_in_queue + 
        '" name="upload_image_' + items_in_queue + '" accept="image/jpeg" type="file"' + 
        'onchange="add_to_upload_queue()" style="display: inline;" />';
}

Answer 1

是的......你会想要使用appendChild而不是修改内部HTML：

var myInput = document.createElement("INPUT");
// do stuff to my input

var myContainer = document.getElementById("uploader_holder");
myContainer.appendChild(myInput);

这就是你必须做的事情的一般要点 - 如果你需要更具体的东西，请告诉我，但看起来你已经很好地掌握了 JS...你几乎想在所有情况下都这样做案例而不是设置内部 HTML...所以，也构建您的 TR...您必须将 TD 附加到 TR，您必须将 TD 附加到您的输入，您必须附加您的带有 TR 的目标表等