Bootstrap上传文件插件fileinput多文件上传、预览、删除以及限制最大上传数量

た入场券 2023-06-13 09:07 112阅读 0赞

#### Bootstrap上传文件插件fileinput多文件上传、预览、删除以及限制最大上传数量 ####

项目需求：给房型添加图片管理操作，每种房型下有多张图片，数据库有房型表和图片表，图片表逻辑关联房型表id，每张图片对应图片表的一条数据。本篇主要对fileinput多图上传处理做一个记录，如有不足请大家提出宝贵意见。另fileinput上传配置项和事件请参考：[配置项][Link 1]，[事件][Link 2]。

##### 一、示例截图 #####

![房型][20191115105113658.png]  
![图片管理][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODk2NzMw_size_16_color_FFFFFF_t_70]

##### 二、实例代码 #####

由于使用若依管理系统的通用上传方法，本部分图片上传到服务器的功能不再介绍，如想了解请参考[若依管理系统源码][Link 3]。  
本实例多图上传操作描述：图片的最大上传数量为3张。选择一张图片后，会自动调用上传功能将图片上传到服务器，上传成功后，将图片的路径保存到数据库；当拖拽框内的图片等于三张时，选择按钮会被禁用，只有删除图片使得图片的数量少于3张才会启用选择按钮；删除图片时，根据图片路径删除数据库数据，此时存在一个问题，拖拽区回显的图片的src是数据库图片路径而新上传的图片的src是base64,无法根据图片路径找到数据库中的对应数据并执行删除操作，目前采用新上传的图片点击删除按钮时页面刷新，刷新后的页面所有图片的src都是数据库中的图片路径，这时再删除图片，就能删除对应数据库中的数据。目前还没有想到更好的解决办法，之后有了更好的办法会更新此博客。

//目前拖拽区图片总数量,这样做判断的目的是由于每次选择一张图片都会
     //自动上传，maxFileCount是单次上传文件数量，在这种情况下是不生效的。
    function nowImgTotal() {
        
     return $(".file-preview-thumbnails").find('.file-preview-frame').length / 2;
    }

function getMeg() {
        
       if (nowImgTotal() >= 3) {
        
            $('#imgFile').attr('disabled', 'disabled');
            $.modal.msg("图片允许上传的最大数值为3，请删除需要被替换的图片后再进行上传操作!");
        }
    }

[Link 1]: https://blog.csdn.net/qq_34896730/article/details/103068603
[Link 2]: https://blog.csdn.net/qq_34896730/article/details/103071998
[20191115105113658.png]: https://img-blog.csdnimg.cn/20191115105113658.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODk2NzMw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191115105329463.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODk2NzMw,size_16,color_FFFFFF,t_70
[Link 3]: https://gitee.com/y_project/RuoYi