File Input多次添加文件，动态删除文件，用来实现上传等操作

最新推荐文章于 2022-05-17 15:35:08 发布

TechFE

最新推荐文章于 2022-05-17 15:35:08 发布

阅读量8.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： file-input

本文链接：https://blog.youkuaiyun.com/future_todo/article/details/52683969

前端专栏收录该内容

52 篇文章

订阅专栏

本文介绍了如何在网页中实现在file input元素上动态添加和删除文件，以满足文件上传需求。通过获取FileList对象并对其进行操作，可以实现文件列表的动态更新。核心在于理解FileList是类数组对象，并将其转换为数组以便进一步处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.需求图示

2.按图索骥

添加实际上，添加附件就是<input type="file" id="myFile">的控件，var fileList = getElementById(myFile).files就可以得到选择的文件的FileList对象，这个对象是类数组的对象(含义有点像函数参数arguments)。记住这一点很重要。
显示下面的显示文件名的面板根据上传的文件名name显示

3.刨根问底

FileList类数组对象
console.log(fileList)打印出来的结果显示：
bash FileList 0:File lastModified:1446204650848 lastModifiedDate:Fri Oct 30 2015 19:30:50 GMT+0800 (中国标准时间) name:"CCGIS.png" size:809542 type:"image/png" webkitRelativePath:"" __proto__:File length:1 __proto__:FileList
思考：我们只需要能动态修改fileList即可，第一想法是将它转化为数组进行操作。
files = Array.prototype.slice.call(files);

4.付诸行动

动手编程吧：
html很简单，省略
逻辑代码

            var fileInput = document.getElementById('myFile');
            var files = fileInput.files; //filelist

            $('#myFile').on('change', function(event) {

                files = fileInput.files; //应该重新获取
                console.log(files);

                files = Array.prototype.slice.call(files); //全部转化为数组
                fileLists = fileLists.concat(files);
                //显示文件名面板
                if (files.length !== 0) {
                    var html = '';
                    for (var i = 0; i < files.length; i++) {
                        html += "<p>" + files[i].name + "&nbsp&nbsp<img class='icon-remove'></p>";
                    }
                    $('.upfile-list-mes').append(html);
                }
            });

           /*点击叉号可以删除要上传的文件*/
            $('.upfile-list-mes').on('click', '.icon-remove', function(event) {
                var ind = $(this).parent().index();
                $(this).parent().css('display', 'none');
                fileLists.splice(ind, 1);//修改fileLists
                console.log(fileLists);
            });