多图片上传&预览，如何删除指定图片

[sTrevor]

多图片上传&预览，如何删除指定图片。类似每张图片右上角有个叉，点击就删除。

[devin87]

已添加删除按钮，默认隐藏，可通过样式配置为显示，见demo

[sTrevor]

效率真高，谢谢。

[sTrevor]

//添加之前触发 add: function (task) { //task.limited存在值的任务不会上传，此处无需返回false switch (task.limited) { case 'ext': return alert("允许上传的文件格式为：" + this.ops.allows); case 'size': return alert("允许上传的最大文件大小为：" + Q.formatSize(this.ops.maxSize)); } if (this.list.length > 0) { for (var i = 0; i < this.list.length - 1; i++) { var mtask = this.list[0]; this.ops.view.removeChild(mtask.box); this.list.splice(mtask.index, 1); this.map[mtask.id] = undefined; this.index = 0; RemoveTask(1); } this.list.splice(0, this.list.length); } //只允许添加一张图片，重复添加覆盖之前的图片 if (this.list.length > 1) { return false; } task.id = 1; console.log(this.list); },

这是我实现的单张图片的上传预览，实现当前图片替换上张图片。感觉太繁琐，自己有时候都看不懂。能帮忙整合下吗？

[devin87]

已添加单图片上传demo，主要代码如下：

new Uploader({
    //选择文件时是否允许多选
    multiple: false,
    
    on: {
        //添加之前触发
        add: function (task) {
            this.ops.view.innerHTML = '';

            this.list = [];
            this.map = {};
            this.index = 0;
            this.workerIdle = 1;
        }
    }
});

[sTrevor]

添加一张图片，console.log(this.list); 输出数组中会产生两个对象并且内容相同。添加2张图片会输入4个对象

[sTrevor]

点击右上角的删除，this.map和this.list依然保存着之前的数据。

[sTrevor]

self.list.splice(taskId, 1);
delete self.map[taskId];
这个是我自己改的代码

[devin87]

在启用了压缩的情况下，同一个任务会有2条数据，但只会上传一次，忽略即可。