当前位置 博文首页 > 遇见一个人流泪的博客:bootstrap-fileinput用法详解

    遇见一个人流泪的博客:bootstrap-fileinput用法详解

    作者:[db:作者] 时间:2021-06-21 18:38

    $("#imgUpload").fileinput({
        language: 'zh',
        //showCaption: false,
        //showPreview: true,
        showClose: false,
        browseClass: "btn btn-info",
        uploadUrl: createUrl('/ueditor/upload'),
        maxFileSize: 1000,
        maxFilesNum: 10,
        allowedFileExtensions : ['jpg', 'png','gif']
    });
    var imgs = [];
    $("#imgUpload").on("fileuploaded", function(event,data,previewId,index){  
        var img = {
            id: previewId,
            name: data.response.url
        };
        imgs.push(img);
    });
    $("#imgUpload").on("filesuccessremove", function(event,data,previewId,index){  
        for(var i=0; i<imgs.length; i++){
            if(data == imgs[i].id){
                imgs.splice(i, 1);
            }
        }
        if(imgs.length == 0){
            $("#imgUpload").fileinput('clear'); //避免一张张删除完后预览框变小
        }
    });
    $("#imgUpload").on("filecleared", function(event,data,previewId,index){  
        imgs = [];
    });

    注: 上传成功后再删除图片,发现data是以uploaded-开头的,而数组中存的都是以preview-开头的,修改代码如下:

    //if (file !== undefined) {
        newstack[i] = file;
        newnames[i] = self._getFileName(file);
        $thumb.attr({
            'id': self.previewInitId + '-' + i,
            'data-fileindex': i
        });
        i++;
    /*} else {
        $thumb.attr({
            'id': 'uploaded-' + uniqId(),
            'data-fileindex': '-1'
        });
    }*/