问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
savokiss
    6.2k113951

    需求

    • 最多选择两个文件
    • 每个文件后面都有一个删除按钮，点击按钮删除该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好写，但是怎么删除文件域中的那个元素？
    javascriptinput标签
    阅读 11.5k
    1 个回答
    得票最新
    头像
    asins
      2227

      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>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏