若依项目上传下载附件实现

这篇博客介绍了如何使用bootstrap-fileinput组件实现上传下载附件功能,详细讲述了从下载源码、引入静态资源到前后端实现的具体步骤,包括数据库表设计、控制器代码编写以及前端js封装。并提供了相关API和Demo链接以供参考。
摘要由CSDN通过智能技术生成

该上传下载附件的功能是基于bootstrap fileinput组件实现的。

其源码以及API地址如下:

bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput

bootstrap-fileinput在线API:http://plugins.krajee.com/file-input

bootstrap-fileinput Demo展示:http://plugins.krajee.com/file-basic-usage-demo

先看一下实现的效果图:此处与默认的上传样式有区别,是因为使用了【explorer】样式的主题。

 

下面记录一下具体实现步骤:

1、下载源码,将相应js、css分别放入static目录下,如下:主要是fileinput.min.js、fileinput.min.js、以及用于显示中文的zh.js、主题相关theme.min.js、theme.min.css

  

 

2、在include.html中引入相应js、css

<link th:href="@{/css/bootstrap-fileinput/fileinput.min.css}" rel="stylesheet"/>
<link th:href="@{/css/bootstrap-fileinput/themes/explorer/theme.min.css}" rel="stylesheet"/>

 

<script th:src="@{/js/plugins/bootstrap-fileinput/fileinput.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-fileinput/themes/explorer/theme.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-fileinput/locales/zh.js}"></script>

3、先考虑后端的实现,此处需要在数据库中新建一张sys_attachment表,用于保存上传图片的相关信息,包括图片名称、图片路径等,生成语句如下:

DROP TABLE IF EXISTS `sys_attachment`;
CREATE TABLE `sys_attachment` (
  `id` bigint(10) NOT NULL AUTO_INCREMENT COMMENT 'id',
  `business_type` varchar(40) DEFAULT NULL COMMENT '业务类型',
  `business_id` varchar(40) DEFAULT NULL COMMENT '业务Id',
  `file_path` varchar(100) DEFAULT NULL COMMENT '文件路径',
  `file_name_real` varchar(100) DEFAULT NULL COMMENT '真实的文件名',
  `file_name_show` varchar(100) DEFAULT NULL COMMENT '显示用的文件名',
  `file_size` bigint(10) DEFAULT NULL COMMENT '文件大小',
  `del_flag` int(10) DEFAULT NULL COMMENT '删除标记',
  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=81 DEFAULT CHARSET=utf8 COMMENT='附件表';

4、后台创建sys_attachment对应的实体、mapper、service、controller文件。此处主要展示AttachmentController层代码:

@Controller
@RequestMapping("/system/attachment")
public 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值