Question

我有这样简单的上传表单：

            <form method="post" action="" enctype="multipart/form-data">
                <table border="0">
                    <tr>
                        <td>Select XML to upload:</td>
                        <td><input type="file" name="fileUpload" id="files" size="50" multiple/></td>
                    </tr>
                    <div id="selectedFiles"></div>
                    <tr>
                        <td colspan="1" align="center"><input type="submit" value="Upload" /></td>
                    </tr>
                </table>
            </form>


    <script>
        var selDiv = "";

        document.addEventListener("DOMContentLoaded", init, false);

        function init() {
            document.querySelector('#files').addEventListener('change', handleFileSelect, false);
            selDiv = document.querySelector("#selectedFiles");
        }

        function handleFileSelect(e) {
            console.dir(e);

            if (!e.target.files)
                return;

            selDiv.innerHTML = "";

            var files = e.target.files;
            for (var i = 0; i < files.length; i++) {
                var f = files[i];

                selDiv.innerHTML += f.name + "<button id='" + f.name + "'>  Delete: " + f.name + "</button><br/>";

            }

        }
    </script>

表格能够显示实际选择中的所有数据。我想在我的按钮selDiv.innerHTML += f.name + "<button id='" + f.name + "'> Delete: " + f.name + "</button><br/>";上实现删除功能。

问题在于我不知道该怎么做。

你能帮帮我吗？

有人可以给我看一些代码吗？

我认为，最好的方法是在onclick上使用一些button事件。但是如何从选择列表中删除一个项目？

Answer 1

无法从只读FileList对象中删除File对象。您可以使用File将FormData个对象添加到.append()对象，然后使用.delete()通过引用FormData()中的密钥从FormData对象中删除项目;如，

var data = new FormData();
for (var i = 0; i < files.length; i++) {
  data.append("file-" + i, files[i], files[i].name);
};
data.delete("file-0"); // delete `"file-0"` of `data`

然后POST FormData对象到服务器。

您也可以将File个对象添加到Array，然后使用.splice()从数组中删除该项，请参阅input file to array javascript/jquery

删除html上传表单中的功能

1 个答案: