html上传表单中的删除功能 [英] Delete function in html upload form

问题描述

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

I have simple upload form like this:

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

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

Form is able to show all data in actual select. I want implement delete function on my button selDiv.innerHTML += f.name + "<button id='" + f.name + "'> Delete: " + f.name + "</button><br/>";.

问题是我不知道该怎么做.

The problem is that I don't know how to do it.

你能帮我吗?

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

Can somebody show me some code?

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

I think, best way is use some onclick event on my button. But how to delete one item from select list?

推荐答案

无法从只读 FileList 对象.您可以使用 .append() 将 File 对象添加到 FormData 对象，然后使用 .delete() 删除FormData() 对象中的 item 通过引用 FormData 中的键；例如，

It is not possible to delete a File object from read-only FileList object. You can add File objects to FormData object using .append(), then use .delete() to remove item from FormData() object by referencing the key in FormData; e.g.,

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 对象发送到服务器.

then POST the FormData object to server.

您也可以将 File 对象添加到 Array 并使用 .splice() 从数组中删除项目，请参阅 输入文件到数组javascript/jquery

You can alternatively add File objects to an Array and use .splice() to remove the item from the array, see input file to array javascript/jquery

这篇关于html上传表单中的删除功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！