如何在Krajee Boostrap FileInput中删除图像?

问题描述 投票:0回答:1

目前使用这个plugin上传我的网站上的图片,我很难找到一种方法来触发一个事件来调用我的PHP文件,当用户上传图像后点击删除按钮。 (删除功能如何工作?)

(我的上传工作完美!只是无法获取删除部分)

HTML:

 <input id="input-upload" name="input-upload[]" type="file" multiple="true">

JS代码:

$("#input-upload").fileinput({
        uploadUrl: 'uploadImg.php',
        deleteUrl: 'deleteImg.php',
        showCaption: false,
        dropZoneEnabled: false,
        maxFileSize: 7000,
        maxFileCount: 5,
        uploadAsync: false,
        allowedFileExtensions : ['jpg', 'png','gif'],


        previewFileType: "image",
    browseClass: "btn btn-success",
    browseLabel: "Pick Image",
    browseIcon: '<i class="glyphicon glyphicon-picture"></i>',
    removeClass: "btn btn-danger",
    removeLabel: "Delete",
    removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
    uploadClass: "btn btn-info",
    uploadLabel: "Upload",
    uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
        initialPreviewShowDelete:true,

    });

我还尝试过各种事件,比如filepredelete和filedeleted函数,但是当用户点击删除按钮时,这些事件从未被调用过。只有fileclear事件可以工作,但这是没有意义的,因为我总会得到一个空列表,它没用,因为我无法删除我服务器上的那些上传文件。

我想找到一种方法来获取当前列表或找出用户删除的图像,以便我可以在服务器中删除它。 (在删除之前和之后获取我的输入上传数组)

有人可以帮帮我吗?提前致谢!

javascript php jquery html upload
1个回答
3
投票

添加initialPreview

initialPreview for your uploaded images:
initialPreview: {
    `img src='/images/desert.jpg' class='file-preview-image' alt='Desert' title='Desert'>`",
    `<img src='/images/jellyfish.jpg' class='file-preview-image' alt='Jelly Fish' title='Jelly Fish'>`",
},

然后将Config添加到此预览:

initialPreviewConfig:

{
                {
                    caption: 'desert.jpg',
                    width: '120px',
                    url: '/localhost/public/delete', 
                    key: 100,
                    extra: {id: 100}   ***// id of your image***
                   }};
© www.soinside.com 2019 - 2024. All rights reserved.