Javascript .innerHTML重设我的< input type ="档案"> [英] Javascript .innerHTML resets my <input type="file">

问题描述

我有一个关于在javascript中上传多个文件的问题。我正尝试通过动态添加输入来创建自己的多个文件上传。这很容易，但问题是，每当我添加一个新的，我以前的输入字段的类型文件得到重置。

I have a problem concerning multiple file uploads in javascript. I am trying to create my own multiple file upload by dynamically adding inputs. This is all easy as pie, but the problem is that whenever I add a new , my previous input-fields of the type "file" get reset.

如果我删除最后一行代码，我改变了我的父div的innerHTML，我的价值不会重置。有谁知道如何解决这个问题？ JavaScript代码可以在下面找到。
$ b

If I remove the last lines of code where I alter the innerHTML of my parent div, the values of my do not get reset. Does anyone know how this problem can be solved? The javascript code can be found below. Thanks in advance.

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;" />';
}

推荐答案

我们想要使用appendChild而不是修改内部HTML：

Yeah... you're going to want to use appendChild instead of modifying the inner 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中附加你的目标表。

That's the general gist of what you have to do - let me know if you need somethign more specific, but it looks like you've got a good hold on JS already... You're going to want to do that in almost all cases rather than setting inner HTML... So, building your TR as well... you'll have to append the TD to the TR, you'll have to append the TD with your input, you'll have to append your targeted table with the TR, etc.

这篇关于Javascript .innerHTML重设我的< input type ="档案">的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！