Question

我有一个上传表单

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

使用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>

选择文件然后单击按钮后，我得到控制台结果：

1
0

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

5
0

每当我对innerHTML进行更改时，表单似乎都会重置。 <input type="file">正在重置。解决这个问题？

Answer 1

您无法修改html，因为整个html内容将再次初始化。使用类似的东西：

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

Answer 2

表单正在提交并因此重新加载。

有三种常见的修复方法。

选项1：将<input>更改为<button type="button>。那些不提交表格。

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

<击>

只需重新阅读文档..输入类型=“按钮”不提交表单

选项2 ：修复JavaScript语法错误，然后添加return false

<script> function foo() { console.log(document.getElementById('fileInput').files.length); // check number of files document.getElementById('uploadForm').innerHTML += "<p>Additional Paragraph</p>"; console.log(document.getElementById('fileInput').files.length); // check number of files again // **ADDED RETURN FALSE AND CLOSING } return false; } </script>

选项3：防止每次通过输入提交表单。

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

HTML上传表单重置innerHTML更改后

2 个答案: