简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - input type=file多选文件列表怎么单个添加删除按钮？
PHP中文网
PHP中文网 2017-04-10 15:23:01
0
1
423

需求

  • 最多选择两个文件
  • 每个文件后面都有一个删除按钮，点击按钮删除该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好写，但是怎么删除文件域中的那个元素？
PHP中文网
PHP中文网

认证高级PHP讲师

membalas semua(1)
迷茫
迷茫2017-04-10 15:25:01 Tingkat 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>
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！