当前位置：文江博客话题详情

JavaScript input标签

input type=file多选文件列表怎么单个添加删除按钮？

发布于 2022-09-01 12:18:09 字数 1683 浏览 24 评论 0

需求

最多选择两个文件
每个文件后面都有一个删除按钮，点击按钮删除该li，同时也删除文件域中对应的文件

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script>
            window.onload = function(){
                var oFile = document.getElementById('file');
                var oList = document.getElementById('fileList');
                var delNode = function(i){
                    console.log(i);
                }
                oFile.onchange = function(e){
                    if(this.files.length>2){
                        alert('最多选择两个文件！');
                        this.value = '';
                    }else{
                        for(var i=0;i<this.files.length;i++){
                            var node = document.createElement('li');
                            node.setAttribute('id','li_'+i);
                            var html = this.files[i].name+"<button title='btn_"+i+"' class='delBtn'>del</button>";
                            node.innerHTML = html;
                            oList.appendChild(node);
                        }
                    }
                };

            };
        </script>
    </head>
    <body>
        <input type="file" multiple  id="file">
        <ul id="fileList">

        </ul>
        <input type="button" value="Clear" id="clearBtn">
    </body>
</html>

图片描述

疑问

前面都实现了
点删除按钮的时候删除li好写，但是怎么删除文件域中的那个元素？

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

眼泪都笑了 2022-09-08 12:18:09

JS目前无法直接操作FileList对象，但我们还是可以处理的，我能想到的就是将FileList从原来的form提交方式抽离出来，可以使用xhr2的二进制方式提交。

比如下写法：

html<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <p>从Files选择的多个文件中删除某个</p>
    <hr>

    <input type="file" multiple  id="file">
    <ul id="fileList"></ul>
    <input type="button" value="Clear" id="clearBtn">

    <script>
        var oFile = document.getElementById('file');
        var oList = document.getElementById('fileList');
        var fileList;
        oFile.onchange = function(e){
            if(this.files.length>2){
                alert('最多选择两个文件！');
                this.value = '';
            }else{
                fileList = Array.prototype.slice.call(this.files);
                for(var i=0;i<this.files.length;i++){
                    var node = document.createElement('li');
                    node.setAttribute('id','li_'+i);
                    var html = this.files[i].name+"<button title='btn_"+i+"' class='delBtn'>del</button>";
                    node.innerHTML = html;
                    oList.appendChild(node);
                }
            }
        };

        oList.addEventListener('click', function(e){
            var $el = e.target;
            if($el.className == 'delBtn'){
                var $li = $el.parentNode;
                $li.parentNode.removeChild($li);
                var index = parseInt( $el.getAttribute('title').replace('btn_', '') );
                fileList.splice(index, 1);
            };
        }, false);

        // 提交文件时
        fileList.forEach(function (file) {
            if (file.name.matches(/something.txt/)) { // 这里可以过虑掉不是你需要的格式的文件
                var reader = new FileReader();
                // 开始监听
                reader.onload = (function (processedFile) {
                    return function (e) {
                        var fileData = { name : processedFile.name, fileData : e.target.result };

                        // 提交到你的服务器上
                        $.post("/your/url/here", fileData); // 这句是用jQuery的语法写的，真实的得自己去实现

                        // or add to list to submit as group later
                        validatedFiles.push(fileData);
                    };
                })(file);

                // 开始将文件加载到内存中
                reader.readAsDataURL(file);
            } else {
            /* 不是你想要的文件时的处理 */
            }
        });
    </script>
</body>
</html>

~没有更多了~

关于作者

等待我真够勒

暂无简介

0 文章

0 评论

24 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

沧笙踏歌

文章 0 评论 0

山田美奈子

文章 0 评论 0

佚名

文章 0 评论 0

岁月无声

文章 0 评论 0

待天淡蓝洁白时

文章 0 评论 0

暗藏城府

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文