Question

function addkid() {
  if (i <= 2) {
    i++;
    var div = document.createElement('div');
    div.innerHTML = '<br> Prescription '+i+':<br><input id="uploadFile" class="disableInputField" placeholder="Choose File" disabled="disabled" />'+'<label class="fileUpload">'+'<input id="uploadBtn" type="file" required class="upload" name="Image'+i+'" />'+'<span class="uploadBtn">Upload</span>'+'</label>'+'  <input type="button" value="-" onclick="removekid(this)">';
    document.getElementById('kids').appendChild(div);

  }

这是我用来添加文件上传选项的javascript函数＆＃34; +＆＃34;点击。

<div id="kids">

<input id="uploadFile" class="disableInputField" placeholder="Choose File" disabled="disabled" />


<label class="fileUpload">
    <input id="uploadBtn" type="file" class="upload" name=Image1 />
    <span class="uploadBtn">Upload</span>
</label>



        <input type="button" id="add_kid()" onclick="addkid()" value="+" />(MAX 3)

      </div></td></tr>


                        </div>

            <script>
                 document.getElementById("uploadBtn").onchange = function  {
    document.getElementById("uploadFile").value = this.value;
};

            </script>

这是用于创建第一个文件上传选项的html代码！代码中写入的函数用于显示上传文件的文件路径！虽然第一个javascript代码（addkid（）函数）可以用来创建更多的文件上传选项，但它无法显示上传文件的文件路径，因为我无法将脚本标签内的函数调用到addkid （）函数在第一个代码中！如何将脚本标记内的函数调用到addkid（）函数？

虽然文件已上传到第二个文件上传选项但未显示因为

<script>
                     document.getElementById("uploadBtn").onchange = function  {
        document.getElementById("uploadFile").value = this.value;
    };

                </script>

此函数未被调用

Answer 1

这里有2个问题：

1）对于不同的上传按钮，您具有相同的ID。这么多级别都是错的。你应该使他们的id独特。要做到这一点，你可以这样做：

div.innerHTML = '<br> Prescription '+i+':<br><input id="uploadFile-' + i + '" class="disableInputField" and etc...

这样每个上传按钮的ID都与模式uploadFile-N相匹配，其中N - 是上传按钮的索引。

这也适用于上传和删除按钮。你也应该把它们做成唯一的ID。

2）HTML脚本中的代码不会触发，因为您无法在尚不存在的元素上绑定事件。您所要做的就是将代码document.getElementById("uploadBtn").onchange ... and etc移到第一个javascript代码示例的这一部分：

function addkid() {
    if (i <= 2) {
        i++;
        var div = document.createElement('div');
        div.innerHTML = '<br> Prescription '+i+':<br><input id="uploadFile-' + i + '" class="disableInputField" placeholder="Choose File" disabled="disabled" />'+'<label class="fileUpload">'+'<input id="uploadBtn-' + i + '" type="file" required class="upload" name="Image'+i+'" />'+'<span class="another-uploadBtn-' + i + '">Upload</span>'+'</label>'+'  <input type="button" value="-" onclick="removekid(this)">';
        document.getElementById('kids').appendChild(div);
        //TODO here I inserted your code that binds onchange event
        document.getElementById("uploadBtn-" + i).onchange = function  {
            document.getElementById("uploadFile-"+i).value = this.value;
        };
    }
}

在创建的除法元素中编写脚本

1 个答案: