多图片上传&预览,如何删除指定图片
Opened this issue · 8 comments
多图片上传&预览,如何删除指定图片。类似每张图片右上角有个叉,点击就删除。
已添加删除按钮,默认隐藏,可通过样式配置为显示,见demo
效率真高,谢谢。
//添加之前触发 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); },
这是我实现的单张图片的上传预览,实现当前图片替换上张图片。感觉太繁琐,自己有时候都看不懂。能帮忙整合下吗?
已添加单图片上传demo,主要代码如下:
new Uploader({
//选择文件时是否允许多选
multiple: false,
on: {
//添加之前触发
add: function (task) {
this.ops.view.innerHTML = '';
this.list = [];
this.map = {};
this.index = 0;
this.workerIdle = 1;
}
}
});
添加一张图片,console.log(this.list); 输出数组中会产生两个对象并且内容相同。添加2张图片会输入4个对象
点击右上角的删除,this.map和this.list依然保存着之前的数据。
self.list.splice(taskId, 1);
delete self.map[taskId];
这个是我自己改的代码
在启用了压缩的情况下,同一个任务会有2条数据,但只会上传一次,忽略即可。