HTML上传表单重置在innerHTML更改后 [英] HTML Upload Form Resetting After innerHTML change

问题描述

我有一个上传表单

<form id="uploadForm" >
<input type="file" id="fileInput" multiple>
<input type="button" onclick="foo()">
</form>

使用javascript

With javascript

<script>
    function foo()
    {
    console.log(document.getElementById('fileInput').files.length); // check number of files
    document.getElementById('uploadForm').innerHTML += "<p>Additional Paragraph</p>"; // make a change to the innerHTML
    console.log(document.getElementById('fileInput').files.length); // check number of files again
    }
</script>

在我选择一个文件然后点击按钮后，我得到了控制台结果：

After i choose a file and then click the button, I get console result:

1
0

或者如果我选择多个文件并单击按钮，我将获得控制台结果结果：

Or if i choose multiple files and click button I get console result result:

5
0

每当我对innerHTML进行更改时，表单就会重置。 < input type =file> 正在重置。解决方法是这样的吗？

It appears that the form is resetting whenever I make a change to the innerHTML. <input type="file"> is being reset. Workaround to this?

推荐答案

您无法修改html，因为整个html内容会被重新初始化。使用类似于：

You cannot modify html, because whole html content will be initialized again. Use something like:

var fileInput = document.getElementById('fileInput'),
p = document.createElement('P');
p.innerHTML = 'Something';
fileInput.parentNode.insertBefore(p, fileInput.nextSibling);

这篇关于HTML上传表单重置在innerHTML更改后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！