plupload组件问题(附代码)请指导,谢谢,图片自动删除了但是队列没有删除?

发布于 2022-09-07 12:47:43 字数 2391 浏览 38 评论 0

问题最终目的是实现,判断重复图片并自动删除。

以下是与目的不一样效果截图
选择重复图片后弹出提示信息

队列没有删除

以下是主要代码。
'FilesAdded': function(up, files) {
    $('table').show();
    $('#success').hide();
    //图片列表最多只能有5张,判断是否超过,超过的则移除
    var count = files.length + uploadStoreImgUrl.length + fileNameList.length;
    if (files.length > 5 && (uploadStoreImgUrl.length + fileNameList.length) == 0) {
        var addLength = files.length;
        for (var i = addLength - 1; i > addLength - 1; i--) {
            up.removeFile(files[i].id);
            files.splice(i, 1);
        }
    }
    if (count > 5) {
        var addFile = files.length - (count - 5) - 1,
        tempLength = files.length;
        for (var m = tempLength - 1; m > addFile; m--) {
            up.removeFile(files[m].id);
            files.splice(m, 1);
            up.disableBrowse(true); //选择数量达到限制后禁止选择文件
            $('.glyphicon-plus').removeClass('glyphicon-plus').addClass('glyphicon-ban-circle'); //替换为禁止图标
            alert("超过上传数量限制,系统将自动删除多余的文件");
        }

    }
    plupload.each(files,
    function(file) {
        var progress = new FileProgress(file, 'fsUploadProgress');

        //判断图片是否重复,弹出提示并且从列表删除
        for (var i = 0; i < files.length; i++) {
            if (file.name == fileNameList[i]) {
                //$('#' + file.id).find('td').eq(0).append("<td>该图片已存在列表,请删除!</td>");
                up.removeFile(files[i].id);
                //files.splice(i, 1);
                alert("该图片已存在列表,系统将自动删除");
            }
        }
        //添加到上传队列,并且在页面预览
        fileNameList.push(file.name);
        var preloader = new mOxie.Image(); //图片上传前预览
        preloader.onload = function() {
            preloader.downsize(100, 100); //压缩图片
            var imgItem = '<img id="' + file.id + '" name="' + file.name + '" src="' + preloader.getAsDataURL() + '">';
            var liCont = '<li>' + imgItem + '<div class="icon-close close-icon"></div></li>';
            $('#' + file.id).find('td').eq(0).prepend(liCont);
        }
        preloader.load(file.getSource());
        progress.setStatus("等待..."); //等待上传
        progress.bindUploadCancel(up);
    });

}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

碍人泪离人颜 2022-09-14 12:47:43

uploader.bind('FilesAdded',function(uploader,files){

    var fileLen = uploader.files.length;
    if(fileLen>1){
        uploader.splice(0,fileLen-1);//清空上传队列
    }

    console.log(uploader.files.length)

    $('#fileUpload').next('span').remove();
    $('#fileUpload').after('<span>'+files[0].name+'</span>')
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文