js表单的oninput事件

Question

我有一个带有多个文件字段的表单，每当文件上传到它时，我都会将它们附加到一个名为 filesinput 的数组（使用 oninput 事件）并将它们添加到 table 显示所有上传的文件以及删除文件的按钮。我截取了提交事件，并改为 POST filesinput 数组。但是，每当我单击“删除”按钮时，由于某种原因，表单会自行提交。

这是我的代码-

window.onload =  function() {
                //var fileinput = document.querySelector('#inputfiles');
                var fileform = document.querySelector('form');
                var filetable = document.querySelector('#submitted');

                fileform.oninput = function(e) {
                    if(!e.target.files)
                        return;
                    var temp = Array.prototype.slice.call(e.target.files);
                    temp.forEach(function(file) {
                        filesinput.push(file);
                        filetable.innerHTML += '<tr> <td>' + file.name + '</td> <td> <button id="' + file.name + '" onclick="removeFile(this.id)">Remove</button></td></tr>';
                    });  
                }

                fileform.addEventListener('submit', function(e) {
                    e.preventDefault();
                    send(filesinput);
                });
            }

编辑- removeFile 函数-

function removeFile(filename) {
                var ind;
                filesinput.forEach(function(file, index) {
                    if(file.name == filename) {
                        ind = index;
                    }
                });
                filesinput.splice(ind, 1);
            }

如果重要的话，它在 window.onload 函数之外。

Answer 1

请尝试将 <button id="' + file.name + '" onclick="removeFile(this.id)">Remove</button> 更改为 <button type="button" id="' + file.name + '" onclick="removeFile(this.id)">Remove</button>

按钮类型不能提交，只有表单不会在点击删除按钮时提交。

js表单的oninput事件

js forms oninput event

javascript

forms

dom-events