bootstrap-fileinput文件上传、回显使用详解

已于 2023-05-12 13:38:37 修改
阅读量3.4k 收藏 15
点赞数 3
分类专栏： java ruoyi js 文章标签： bootstrap javascript java
于 2023-05-11 15:12:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27480007/article/details/130622061
版权
java 同时被 3 个专栏收录
31 篇文章 1 订阅
订阅专栏
js
11 篇文章 0 订阅
订阅专栏
ruoyi
4 篇文章 0 订阅
订阅专栏

文件上传bootstrap-fileinput使用详解


因为在使用若依框架进行学习，里面嵌入了bootstrap-fileinput这个功能，可以说是踩过了很多坑，现在给大家分享一下学习跟调试心得。

一、bootstrap fileinput插件使用中文说明

（一）属性介绍

属性类型默认值描述
languageString‘en’多语言设置，使用时需提前引入locales文件夹下对应的语言文件，中文zh，引入语言文件必须放在fileinput.js之后
showCaptionBooleantrue是否显示被选文件的简介
showBrowseBooleantrue是否显示浏览按钮
showPreviewBooleantrue是否显示预览区域
showRemoveBooleantrue是否显示移除按钮
showUploadBooleantrue是否显示上传按钮
showCancelBooleantrue是否显示取消按钮
showCloseBooleantrue是否显示关闭按钮
showUploadedThumbsBooleantrue这个属性是基于这样一个使用方法的：选择若干个文件后点击右下角上传按钮批量上传，待全部完成后再选择一批文件，此时之前上传成功的文件是否要保存。就是这个属性控制的。注意，点击文件缩略图下面的上传按钮不会导致之前的成功上传的文件消失，即使这里设置了true
browseOnZoneClickBooleanfalse
autoReplaceBooleanfalse是否自动替换当前图片，设置为true时，再次选择文件， 会将当前的文件替换掉。
generateFileIdObjectnull
previewClassString空添加预览按钮的类属性
captionClassString空添加标题类属性
frameClassString‘krajee-default’针对每个缩略图的框架
mainClassString‘file-caption-main’针对元素类属性
mainTemplateObjectnull
purifyHtmlBooleantrue
fileSizeGetterObjectnull
initialCaptionString空
initialPreviewArray/Object[]通过这个参数，我们可以为文件区设置一些默认的缩略图
initialPreviewDelimiterString‘$$’
initialPreviewAsDataBooleanfalse
initialPreviewFileTypeString‘image’
initialPreviewConfig Array/Object[]
initialPreviewThumbTagsArray/Object[]
previewThumbTagsObject{}
initialPreviewShowDeleteBooleantrue
removeFromPreviewOnErrorBooleanfalse
deleteUrlString空删除图片时的请求路径
deleteExtraDataObject{}删除图片时额外传入的参数
overwriteInitialBooleantrue
previewZoomButtonIconsObject {prev: ”,next: ”,toggleheader: ”,fullscreen: ”,borderless: ”,close: ”},
previewZoomButtonClassesObject{prev: ‘btn btn-navigate’,next: ‘btn btn-navigate’,toggleheader: ‘btn btn-default btn-header-toggle’,fullscreen: ‘btn btn-default’,borderless: ‘btn btn-default’,close: ‘btn btn-default’},
preferIconicPreviewBooleanfalse
preferIconicZoomPreviewBooleanfalse
allowedPreviewTypesundefinedundefined
allowedPreviewMimeTypesObjectnull
allowedFileTypesObjectnull接收的文件后缀，如[‘jpg’, ‘gif’, ‘png’],不填将不限制上传文件后缀类型
allowedFileExtensionsObjectnull指出带有哪些后缀名的文件才是被接受上传的，设置msgInvalidFileExtension
defaultPreviewContentObjectnull
customLayoutTagsObject{}
customPreviewTagsObject{}
previewFileIconString空当文件无法被预览时出现在缩略图中的图标，默认是
previewFileIconClassString‘file-other-icon’
previewFileIconSettingsObject{}可以将不同的后缀的文件有不同的缩略图图标
previewFileExtSettingsObject{}
buttonLabelClassString‘hidden-xs’
browseIconString空
browseClassString‘btn btn-primary’指出了右下角选择按钮的样式。一般尽量不要用btn-sm和btn-lg，会和左边的输入框不协调
removeIconString空删除按钮相关的属性
removeClassString‘btn btn-default’
cancelIconString空
cancelClassString‘btn btn-default’
uploadIconString空上传按钮相关的属性
uploadClassString‘btn btn-default’
uploadUrl Stringnull上传文件路径
uploadAsyncbooleantrue是否为异步上传
uploadExtraDataObject{}上传文件时额外传递的参数设置
zoomModalHeightnumber480
minImageWidthStringnull图片的最小宽度
minImageHeightStringnull图片的最小高度
maxImageWidthStringnull图片的最大宽度
maxImageHeightStringnull图片的最大高度
resizeImageBooleanfalse
resizePreferenceString‘width’
resizeQualitynumber0.92
resizeDefaultImageTypeString‘image/jpeg’
minFileSizenumber0单位为kb，上传文件的最小大小值
maxFileSizenumber0单位为kb，如果为0表示不限制文件大小
resizeDefaultImageTypenumber25600(25MB)
minFileCountnumber0表示同时最小上传的文件个数
maxFileCountnumber0表示允许同时上传的最大文件个数
validateInitialCountBooleanfalse
msgValidationErrorClassString‘text-danger’
msgValidationErrorIconString空
msgErrorClassString‘file-error-message’
progressThumbClassString“progress-bar progress-bar-success progress-bar-striped active”
rogressClassString“progress-bar progress-bar-success progress-bar-striped active”
progressCompleteClassString“progress-bar progress-bar-success”
progressErrorClassString“progress-bar progress-bar-danger”
progressUploadThresholdnumber99
previewFileTypeString‘image’预览文件类型,内置[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’,‘other‘]等格式
elCaptionContainerStringnull
elCaptionTextStringnull设置标题栏提示信息
elPreviewContainerStringnull
elPreviewImageStringnull
elPreviewStatusStringnull
elErrorContainerStringnull
errorCloseButtonString×’
slugCallbackfunctionnull选择后未上传前 回调方法
dropZoneEnabledBooleantrue是否显示拖拽区域
dropZoneTitleClassString‘file-drop-zone-title’拖拽区域类属性设置
fileActionSettingsObject{}设置预览图片的显示样式
otherActionButtonsString空编码设置
textEncodingString‘UTF-8’
ajaxSettingsObject{}
ajaxDeleteSettingsObject{}
showAjaxErrorDetailsBooleantrue

（二）Method 方法介绍

方法名描述
fileerror异步上传错误结果处理$(‘#uploadfile’).on(‘fileerror’, function(event, data, msg) {});
fileuploaded异步上传成功结果处理$(“#uploadfile”).on(“fileuploaded”, function (event, data, previewId, index) {})
filebatchuploaderror批量上传错误结果处理$(‘#uploadfile’).on(‘filebatchuploaderror’, function(event, data, msg) {});
filebatchuploadsuccess批量上传成功结果处理$(‘#uploadfile’).on(‘filepreupload’, function(event, data, previewId, index) {});
filebatchselected选择文件后处理事件$(“#fileinput”).on(“filebatchselected”, function(event, files) {});
upload文件上传方法$(“#fileinput”).fileinput(“upload”);
fileuploaded上传成功后处理方法$(“#fileinput”).on(“fileuploaded”, function(event, data, previewId, index) {});
fileresetPossible values: http, https, ws, wss.
fileclear点击浏览框右上角X 清空文件前响应事件$(“#fileinput”).on(“fileclear”,function(event, data, msg){});
filecleared点击浏览框右上角X 清空文件后响应事件$(“#fileinput”).on(“filecleared”,function(event, data, msg){});
fileimageuploaded在预览框中图片已经完全加载完毕后回调的事件

事件案例：filepreremove 在删除前触发事件 fileremoved在删除触发事件 调用通过on调用

$("#fileinputid").on("fileremoved", function (event, key, key2, data) {
    getMeg();
});

文件批量被选择后触发 （常用功能 选择完成后调用上传功能upload）。

 $("#fileinputid").on('filebatchselected', function (event, data) {

        $("#fileinputid").fileinput("upload");
        //选择完成后主动上传

   });

自定义事件： 在源码定义位置使用self._raise(‘filepreremove’, [id, ind]);
filepremove 表示方法名 后面是参数数组 传两个参数 。无参数空数组即可。
对外可用方法：启用缩略图上删除功能方法 通过fileinput(方法名)启用：
$(“#fileinputid”).fileinput(‘_initFileActions’);//这行代码绑定删除remove事件的 无ajax $(“#fileinputid”).fileinput(‘_initPreviewActions’);//这行代码绑定删除delete事件的 ajax
_initFileActions 是remove _initPreviewActions 是delete 不一样 一般使用第一种
upload 方法 调用后上传选择的图片。
clear 清除方法 清除非initpreview的文件
reset 清除方法 清除所有文件

二、增加页面的文件上传

（一）bootstrap-fileinput文件上传功能

1.先引入js依赖

<th:block th:include="include :: bootstrap-fileinput-css" />

<th:block th:include="include :: bootstrap-fileinput-js" />

2.在html上面写入文件框

<div class="file-loading">
     <input id="singleFile" name="file" type="file" >
</div>

（二）根据若依给出的示例引用和改进

1.直接引用若依框架所给的js代码，这个代码不管是不是若以框架都可以使用。

//这里直接用js的ready方法，就是说等这个页面全部加载完之后就去执行写入的js
$(document).ready(function(){
            //单文件上传
            $("#singleFile").fileinput({
                uploadUrl: prefix + "/upload",//文件的上传路径，与后端一致，其中prefix为var prefix = ctx + "common/gongcheng";即你的后台的引用路径
                language: 'zh',//设置语言
                allowedFileExtensions:['image', 'html', 'text', 'video', 'audio', 'flash', 'object','png','jpg','db','txt','pdf'],//允许上传的文件类型，错误会给出提示
                dropZoneTitle: '可以将文件拖放到这里,支持文件上传',
                maxFileCount: 1,//最多上传几个文件
                autoReplace: true//自动替换
            //此功能为自动上传文件，即选择完文件后自动上传，小白可以先不用直接省略掉这部分代码    
            }).on('filebatchselected',function(event,data,previewId,index){
                $(this).fileinput("upload");
                document.getElementById('fjid').value = rsp.fjid;
                log.info("return url:" + rsp.url)
                log.info("return fileName:" + rsp.fileName)
                log.info("return newFileName:" + rsp.newFileName)
                log.info("return originalFilename: " + rsp.originalFilename)
            //建议小白先使用这个方法进行练手    
            }).on('fileuploaded',function(event,data,previewId,index) {
            	//获取到后端传过来的json数据，我的里面包含着一个map集合
                var rsp = data.response;
                //这里我用了一个隐藏域接收了从后端map集合里的一个fjid属性，根据id进行赋值操作
                document.getElementById('fjid').value = rsp.fjid;
                log.info("return url:" + rsp.url)
                log.info("return fileName:" + rsp.fileName)
                log.info("return newFileName:" + rsp.newFileName)
                log.info("return originalFilename: " + rsp.originalFilename)
            }).on('fileremoved',function (event, id, index){
                $("input[name='" + event.currentTarget.id +"']").val('')
            })
        });

2.后台所需要的实体类
我这个是在工程页面传入一个文件，所以会有两个实体类，一个是工程实体类，一个是附件实体类，我的实现逻辑是先传入文件，然后得到一个文件id，把这个id传到add页面的隐藏域中，然后后台在添加时调用隐藏域传递过来的id，根据文件id增加文件跟工程实体类的glid。
这个是我的隐藏域所传的值：

<input type="hidden" name="fjid" id="fjid">

在文件upload方法里面把fjid这个属性赋值，把后台传过来的付给他

 }).on('fileuploaded',function(event,data,previewId,index) {
                var rsp = data.response;
                document.getElementById('fjid').value = rsp.fjid;

然后后台调用增加方法

（三）根据uploadUrl进行上传

/**
     * 资料上传请求(单个)
     * @return 集合
     */
    @PostMapping("/upload")
    @ResponseBody
    public AjaxResult uploadFile(MultipartFile file) throws Exception {
        try {
            // 上传文件路径
            String filePath = RuoYiConfig.getUploadPath();
            // 上传并返回新文件名称
            String fileName = FileUploadUtils.upload(filePath, file);
            //获取文件的上传路径
            String url = serverConfig.getUrl() + fileName;
            //得到文件的文件名
            String[] split = fileName.split("/");
            //
            String fname = split[split.length - 1];
            //新建一个附件类，把以下的数据赋值给它
            PmsFujian pmsFujian = new PmsFujian();
            //设置文件的路径
            pmsFujian.setUrl(url);
            //设置文件的name
            pmsFujian.setName(fname);
            //设置文件的大小
            pmsFujian.setCssize(file.getSize());
            //设置文件的原始文件名称，即上传的文件名称
            pmsFujian.setCsname(file.getOriginalFilename());
            //设置文件所属的工程模块
            pmsFujian.setMkmc("工程资料");
            //调用文件的新增方法，添加到数据库
            pmsFujianService.insertPmsFujian(pmsFujian);
            //再添加到数据库后，得到了文件的id
            String fjid = pmsFujian.getFjid();
            //创建一个ajax结果，这个ajax继承map集合，相当于一个map集合
            AjaxResult ajax = new AjaxResult();
            ajax.put("url",url);
            ajax.put("name", fname);
            ajax.put("fjid",fjid);
            ajax.put("fileName", fileName);
            返回map集合，也就是前端页面中rsp.data的数据
            return ajax;
        } catch (Exception e) {
            return AjaxResult.error(e.getMessage());
        }
    }

运行完这个方法以后，已经把文件增加到了数据库，此时文件的数据库都有值，把文件的id添加到ajax集合，返回到前端页面，利用

}).on(‘fileuploaded’,function(event,data,previewId,index) {
var rsp = data.response;
document.getElementById(‘fjid’).value = rsp.fjid;

赋值给fjid，传到工程增加的controller层

/**
     * 新增保存工程
     */
    @RequiresPermissions("common:gongcheng:add")
    @Log(title = "工程", businessType = BusinessType.INSERT)
    @PostMapping("/add")
    @ResponseBody
    public AjaxResult addSave(PmsGongcheng pmsGongcheng,String fjid) throws IOException {
        return toAjax(pmsGongchengService.insertPmsGongcheng(pmsGongcheng,fjid));
    }

其中，pmsGongchengService.insertPmsGongcheng(pmsGongcheng,fjid)中的操作为

 /**
     * 新增工程
     * 
     * @param pmsGongcheng 工程
     * @return 结果
     */
    @Override
    public int insertPmsGongcheng(PmsGongcheng pmsGongcheng,String fjid,String jcfa)
    { 
    	//先进行工程的增加	
    	int i =  pmsGongchengMapper.insertPmsGongcheng(pmsGongcheng);
    	//判断是否有文件上传，如果有文件上传，执行下步操作
    	if (!fjid.isEmpty()) {
    	//获取工程的id
            String gcid = pmsGongcheng.getGcid();
            //根据文件的id拿到在数据库中的那条文件数据
            PmsFujian pmsFujian = pmsFujianMapper.selectPmsFujianByFjid(fjid);
            //把文件数据中的glid属性赋值
            pmsFujian.setGlid(gcid);
            //更新文件数据库中的这条信息
            pmsFujianMapper.updatePmsFujian(pmsFujian);
        }
        return i;
    }

（四）完成效果图

在这里插入图片描述

三、编辑(修改)界面文件的上传，回显，删除(数据库同时删除)的操作 )

（一）编辑界面文件的上传

这个跟add界面的文件上传大同小异

1.首先引入js

<th:block th:include="include :: bootstrap-fileinput-css"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>

2.引入标签

<div class="file-loading">
      <input id="singleFile" name="file" type="file">
</div>

引入隐藏域

<input type="hidden" name="fjid" id="fjid">

3.引入js

<!--资料的实现-->
        //单文件上传

        $(document).ready(function(){
            $("#singleFile").fileinput({
                uploadUrl: prefix + "/upload",//文件上传路
                dropZoneTitle: '可以将文件拖放到这里,支持文件上传',
                language: 'zh',
                allowedFileExtensions: ['bmp', 'gif', 'jpg', 'jpeg', 'png', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx','html', 'htm', 'txt', 'text','rar', 'zip', 'gz', 'bz2', 'pdf', 'bpmn', 'bar','db'],
                showUpload: true,//是否显示上传按钮
                showRemove : true, //显示移除按钮
                showPreview : true, //是否显示预览
                showCaption: false,//是否显示标题
                fileSizeGetter: true,
                previewFileType: ['image','txt','text'],
                validateInitialCount:true,
                preferIconicPreview: true, // 这将强制缩略图按照以下文件扩展名的图标显示
                maxFileCount: 1,
                autoReplace: true//自动替换
                //下面的自动上传提交，建议先熟悉下面的文件点击上传
            }).on('filebatchselected',function(event,data,previewId,index){
                $(this).fileinput("upload");
                document.getElementById('fjid').value = rsp.fjid;
                log.info("return url:" + rsp.url)
                log.info("return fileName:" + rsp.fileName)
                log.info("return newFileName:" + rsp.newFileName)
                log.info("return originalFilename: " + rsp.originalFilename)
                //文件上传提交，后台返回数据前台接受
            }).on('fileuploaded',function(event,data,previewId,index) {
            	//后台返回的数据，是一个json数据，里面是个map集合
                var rsp = data.response;
                //把后台返回的fjid的值赋给隐藏于的fjid属性
                document.getElementById('fjid').value = rsp.fjid;
                log.info("return url:" + rsp.url)
                log.info("return fileName:" + rsp.fileName)
                log.info("return newFileName:" + rsp.newFileName)
                log.info("return originalFilename: " + rsp.originalFilename)
            }).on('fileremoved',function (event, id, index){
                $("input[name='" + event.currentTarget.id +"']").val('')
            })
        });

后台代码：

/**
     * 资料上传请求（单个）
     * @return
     */
    @PostMapping("/upload")
    @ResponseBody
    public AjaxResult uploadFile(MultipartFile file) throws Exception {
        try {
            // 上传文件路径
            String filePath = RuoYiConfig.getUploadPath();
            // 上传并返回新文件名称
            String fileName = FileUploadUtils.upload(filePath, file);
            //获取文件的上传路径
            String url = serverConfig.getUrl() + fileName;
            //得到文件的文件名
            String[] split = fileName.split("/");
            String fname = split[split.length - 1];

            PmsFujian pmsFujian = new PmsFujian();
            pmsFujian.setUrl(url);
            pmsFujian.setName(fname);
            pmsFujian.setCssize(file.getSize());
            pmsFujian.setCsname(file.getOriginalFilename());
            pmsFujian.setMkmc("工程资料");
            pmsFujianService.insertPmsFujian(pmsFujian);
            String fjid = pmsFujian.getFjid();
            AjaxResult ajax = new AjaxResult();
            ajax.put("url",url);
            ajax.put("name", fname);
            ajax.put("fjid",fjid);
            ajax.put("fileName", fileName);
            return ajax;
        } catch (Exception e) {
            return AjaxResult.error(e.getMessage());
        }
    }

然后调用工程的编辑方法

 /**
     * 修改保存工程
     */
    @RequiresPermissions("common:gongcheng:edit")
    @Log(title = "工程", businessType = BusinessType.UPDATE)
    @PostMapping("/edit")
    @ResponseBody
    public AjaxResult editSave(PmsGongcheng pmsGongcheng,String fjid) {
        return toAjax(pmsGongchengService.updatePmsGongcheng(pmsGongcheng,fjid));
    }

updatePmsGongcheng 里面的方法执行过程

/**
     * 修改工程
     * 
     * @param pmsGongcheng 工程
     * @return 结果
     */
    @Override
    public int updatePmsGongcheng(PmsGongcheng pmsGongcheng,String fjid,String jcfa)
    {	//先更新工程数据库中的信息
    	int i =  pmsGongchengMapper.updatePmsGongcheng(pmsGongcheng);
    	//判断是否传入了新文件
    	if (!fjid.isEmpty()) {
            String gcid = pmsGongcheng.getGcid();
            PmsFujian pmsFujian = pmsFujianMapper.selectPmsFujianByFjid(fjid);
            pmsFujian.setGlid(gcid);
            pmsFujianMapper.updatePmsFujian(pmsFujian);
        }
        return i;
    }

这样就完成了文件上传

（二）编辑界面文件的回显

1.文件的实体类：

 /** 附件主键 */
    private String fjid;
    /** 名称 */
    @Excel(name = "名称")
    private String name;
    /** 路径 */
    @Excel(name = "路径")
    private String url;
    /** 关联主键 */
    @Excel(name = "关联主键")
    private String glid;
    /** 模块名称 */
    @Excel(name = "模块名称")
    private String mkmc;
    /** 文件大小 */
    @Excel(name = "文件大小")
    private String size;
    /** 文件大小（不加计算） */
    @Excel(name = "文件大小", readConverterExp = "不=加计算")
    private Long cssize;
    /** 文件初始名称 */
    @Excel(name = "文件初始名称")
    private String csname;

2.想要回显文件，首先要在工程类(你的编辑界面的主类)里面关联文件类

public class PmsGongcheng extends BaseEntity {
/**
    * 附件类 xyh
    * */
    private List<PmsFujian> pmsFujian;
    ...生成你的get，set方法和你的tostring

xml中使用collection标签

<collection property="pmsFujian"  column="fjid" ofType="com.lrkj.pms.ztjg.common.domain.PmsFujian" resultMap="PmsFujianResult"/>

在主类的xml文件引入文件的sql

<resultMap type="com.lrkj.pms.ztjg.common.domain.PmsFujian" id="PmsFujianResult">
        <result property="fjid"    column="fjid"    />
        <result property="name"    column="name"    />
        <result property="url"    column="url"    />
        <result property="glid"    column="glid"    />
        <result property="mkmc"    column="mkmc"    />
        <result property="size"    column="size"    />
        <result property="cssize"    column="cssize"    />
        <result property="csname"    column="csname"    />
        <result property="createTime"    column="create_time"/>
        <result property="remark"    column="remark"    />
    </resultMap>

3.进行文件的回显

1.首先文件的回显需要这几个东西：

initialPreview: initialPreview,
initialPreviewConfig: initialPreviewConfig,
initialPreviewAsData: true, // 默认为数据

上面的bootstrap-fileinput文件控件里面自带的属性，把这三个属性放到$(“#singleFile”).fileinput({}）里面

2.编写js代码，实现initialPreview和initialPreviewConfig的实现逻辑：

var pmsFujian = [[${pmsGongcheng.pmsFujian}]];

            var initialPreview = [];

            var initialPreviewConfig = [];

            if(pmsFujian[0].fjid == null){
                pmsFujian = [];
            }
            if(pmsFujian != null && pmsFujian != ''){
                for(var i = 0;i<pmsFujian.length;i++) {
       				var Fujian = pmsFujian[i];
                    if(Fujian != null && Fujian !=''){
                        var delFujian = new Object();
                        delFujian = generFilDel(Fujian);
                        //把文件的路径传到这个数组里面
                        initialPreview.push(Fujian.url);
                        //把文件的信息传到这个数组里面
                        initialPreviewConfig.push(delFujian);
                    }
                }
            }
//这个是判断文件属性的配置类，包含了文件的各种属性，其中url是文件的删除路径，必须要写入，与后台删除路径保持一致，key是文件删除时带到后台的ajax数据，在后台接收的是key不是fjid
            
function generFilDel(file) {
    if(file != null && file != ''){
        var type = file.url.substr(file.url.lastIndexOf('.') + 1);
        if(type=='pdf'){
				return {type: "pdf", size: file.cssize, caption: file.csname, url:prefix + "/deletePic", key: file.fjid, downloadUrl:file.url};
	    }else if(type=='text'){
				return {caption: file.csname, type: "text", size: file.cssize, url:prefix + "/deletePic", key: file.fjid , downloadUrl:file.url};
		}else if(type=='mp4'){
				return  {type: "video", size: file.cssize, filetype: "video/mp4", caption: file.csname, url:prefix + "/deletePic", key: file.fjid , downloadUrl:file.url};
		}else if(type=='txt'){
				return  {type: "txt", size: file.cssize, caption: file.csname, url:prefix + "/deletePic", key: file.fjid , downloadUrl:file.url};
		}else if(type=='db'){
				return  {type: "db", size: file.cssize, caption: file.csname, url:prefix + "/deletePic", key: file.fjid , downloadUrl:file.url};
	    }else{
				return	{caption: file.csname, size: file.cssize, url: prefix + "/deletePic", key: file.fjid};
			  }
		}
     }

此时，就完成了文件的回显：
在这里插入图片描述
回显的预览界面：
在这里插入图片描述

（三）文件的删除

文件删除直接调用bootstrap里面的filesuccessremove方法

on('filesuccessremove',function(event,data,previewId,index){
			    for (var i = 0; i < pmsFujian.length; i++) {
                    if (pmsFujian[i].fjid == data) {
                    delete pmsFujian[i];
                    }
                  }

因为咱们在initialPreviewConfig传入了删除路径和删除时所带的文件id，所以先配置好js代码：

$("#singleFile").fileinput({
//添加文件的删除路径
                deleteUrl: prefix + "/deletePic",

后台代码：

/**
     *删除文件
     *
     */
    @PostMapping("/deletePic")
    @ResponseBody
    //传入从前台过来的key
    public AjaxResult delete(String key){
        return toAjax(pmsFujianService.deletePmsFujianByFjid(key));
    }

这样就实现了前端实现文件移除时后端也删除了文件数据库中对应的文件信息

凡客丶
关注
  • 3
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
bootstrap-fileinput 文件上传
weixin_43853787的博客
08-12 158
$("#fileupload_input_factor").fileinput({ language : 'zh', uploadUrl : contextpath + "/rest/pollutionburining/burninguploadfile?status="+status+"&source="+source, enctype :...
Bootstrap-fileinput实现图片文件上传
IceStreamLab
05-02 3210
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap-fileinput 实现图片上传</title> <link href="https://cdn.bootcss.com/...
详解bootstrap-fileinput文件上传控件的亲身实践
12-09
经理让我帮服务器开发人员开发一个上传文件功能界面，我就想着以前使用过bootstrap-fileinput插件进行文件上传，很不错。赶紧就撸起来了。 1、下载压缩包。插件地址https://github.com/kartik-v/bootstrap-fileinput/ ，下载压缩包解压之后，拿出fileinput.min.js、fileinput.min.css、和中文需要引用的插件zh.js，因为这款插件默认的语言是英语。把这几个文件引入进页面 2、文件的引入顺序 引入bootstrap.min.css 引入fileinput.min.css 引入jquery，版本最好2以上
bootrap fileinput文件上传实例
10-18
bootrap fileinput.js实现的文件上传用例，内容丰富，包含单图片上传和多图片上传用例
JQuery input file类型（图片）上传前回显动态添加
最新发布
码农大兵的博客
05-09 245
当动态添加的图片，需要删除时调用以下方法，同步更新input file 表单数据，方便随时传后台处理。如果需要动态监听添加的图片或元素,比如为了实现拖拽，可以引入以下监听方法。
bootstrap-fileinput 多文件上传,显示,编辑回显,再次新增图片同时显示
LittelCai的博客
02-17 4310
fileinput 多文件上传,显示,编辑回显,再次新增图片同时显示
bootstrap-fileinput-master（文件上传）
12-24
一个bootstrap风格的文件上传组件，包含多种文件上传样式，功能强大。
Bootstaop文件上传回显图片
SourceYang_A的博客
03-24 288
文件上传 HTML <!-- save 添加 编辑 弹出模态框--> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> &lt
Bootstrap中的fileinput 多图片上传及编辑功能
09-01
主要介绍了Bootstrap中的fileinput 多图片上传及编辑功能的实现,非常不错，具有参考借鉴价值，需要的朋友可以参考下
bootstrap-fileinput(二：编辑(修改)界面文件的上传，回显，删除(数据库同时删除)的操作 )
xyhxuyonghao的博客
10-11 6284
bootstrap-fileinput(二：编辑(修改)界面文件的上传，回显，删除(数据库同时删除)的操作 )
前端bootstrap+fileInput+django后端文件编辑回显
Mr_WoLong
11-07 1230
前端bootstrap+fileInput+django后端文件编辑回显
RouYi bootstrap-fileinput 上传回显编辑添加删除
Syuu可可的博客
05-01 4286
RouYi bootstrap-fileinput 上传回显编辑添加删除 文章目录RouYi bootstrap-fileinput 上传回显编辑添加删除前言一、fileinput.js修改二、设置页面fileinput.js调用1.页面初始化控件2.后台delete方法3.页面点击删除事件不触发，任意上传一张图片，删除正常总结 前言 因需求，需要获取图片的newfilename newfilepath并且要给用户展示上传时候的filename，实现如下。 一、fileinput.js修改 修改file
BootStrap文件上传样式超好看【持续更新】
09-02
主要介绍了BootStrap文件上传样式非常好看，通过引入相关插件，实现此效果，非常具有参考借鉴价值，感兴趣的朋友快来一起学习吧
bootstrap-fileinput-master上传插件（中文版）
09-28
在"bootstrap-fileinput-master上传插件（中文版）"中，我们可以看到该插件已经经过汉化处理，方便了中文用户使用。主要特点包括： 1. **预览功能**：允许用户在上传前预览图片、视频、文档等不同类型的文件，提供...
Bootstrap fileinput文件上传预览插件使用详解
01-19
BaseFile是AdminEAP框架中基于Bootstrap-fileinput的附件上传组件，它支持 支持多文件、在线预览、拖拽上传等功能，封装后BaseFile主要包括以下功能： 弹出窗口的附件上传 当前界面的附件上传 显示附件明细 可...
bootstrap-fileinput文件上传插件.zip
03-16
bootstrap-fileinput是一款非常优秀的HTML5文件上传插件，支持文件预览、多选等一系列特性。一款非常优秀的HTML5文件上传插件，支持bootstrap 3.x 和4.x版本，具有非常多的特性:多文件选择。这个插件能最简单的帮你...
Bootstrap fileinput组件封装及使用详解
12-11
BaseFile是AdminEAP框架中基于Bootstrap-fileinput的附件上传组件，它支持 支持多文件、在线预览、拖拽上传等功能，封装后BaseFile主要包括以下功能： 弹出窗口的附件上传 当前界面的附件上传 显示附件明细 可...
bootstrap-fileinput-v4.4.6.js
01-04
这是bootstrap的一个上传控件fileinput，网上下载的一些代码不全，会导致图标、功能出现异常。于是自己就到官网的github下载了一套代码，...另附上官方GitHub网址：https://github.com/kartik-v/bootstrap-fileinput
bootstrap-fileinput 样式
08-09
bootstrap-fileinput是一种基于Bootstrap框架的文件上传插件，它提供了简单易用的界面和丰富的功能。 首先，bootstrap-fileinput具有美观的样式，与Bootstrap的整体风格相匹配。它使用了一系列清晰、直观的图标和按钮，让用户可以方便地浏览、选择和上传文件。 其次，bootstrap-fileinput还支持多种文件展示方式。它可以以列表或网格的形式显示文件预览，在列表模式下可以显示文件的名称、大小、类型等信息，而在网格模式下则可以直观地展示文件的缩略图。这种多样化的展示方式可以让用户根据自己的需求选择最适合的视觉效果。 此外，bootstrap-fileinput还具有丰富的功能。它支持文件的多选和拖拽上传，可以通过设置参数来限制文件的大小、类型和数量等。它还提供了预览、删除和重新选择文件的功能，让用户可以在上传之前查看文件的内容和清理不需要的文件。此外，它还可以通过AJAX异步上传文件，实现无刷新上传的效果。 最后，bootstrap-fileinput还提供了一些额外的扩展功能。例如，它可以通过设置参数来自定义上传按钮的样式和文本，可以根据不同的需求注册和调用一系列的回调函数，以便实现更加灵活的操作。 总之，bootstrap-fileinput是一个功能强大、界面美观的文件上传插件，它可以为用户提供便捷的文件管理和上传体验。不仅仅可以用于网站开发，也可以用在各种基于Bootstrap框架的Web应用中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值