javascript - input type=file多选文件列表怎么单个添加删除按钮？-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

需求

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

代码

疑问

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

PHP中文网

认证高级PHP讲师

全部回复(1)

迷茫2017-04-10 15:25:01 1楼

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

添加回复

专题推荐

更多>

热门话题

热门教程

更多>