前言

  日常开发中,大多数项目都会涉及到附件上传、回显、下载等功能,本文记录封装通用附件管理模块,并与业务模块进行整合实现上传、回显、下载

  我们之前已经对文件上传下载有过记录,传送门:基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现formData批量上传的多种实现自定义input文件上传样式,这里也是基于之前的写一个完整例子

 

  技术栈:layui + thymeleaf + springboot

  代码编写

  项目结构

  前端

  定义模板

  脚本

  后端

  Vo类

  Controller

  测试效果

  test.html页面有两个测试表单,分别整合附件管理模块,需要引入在线jq、layui依赖,再引入我们的附件管理css、js脚本

  上传

  1. //表单提交
  2. function submit1() {
  3. //调用自己的保存业务
  4. let testFormData = $("#testForm1").serializeObject();
  5. console.log(testFormData);
  6.  
  7. //上传附件
  8. Attachment.upload("123456");
  9. }

  上传的文件在AttachmentVo的files数组中

  

  回显可编辑

  1. //表单回显(可编辑)
  2. function showForm1() {
  3. //回显基础数据
  4. $("#testForm1").form({username:"张三",age:18});
  5.  
  6. //回显附件
  7. Attachment.showDndEditAttachments("123456");
  8. }

  重新编辑时,删掉的附件在AttachmentVo的deletes数组中,新上传的附件在files数组中

  回显不可编辑

  1. //表单回显(不可编辑)
  2. function showForm2() {
  3. //回显基础数据
  4. $("#testForm2").form({username:"李四",age:81});
  5.  
  6. //禁用表单、以及隐藏按钮
  7. $("#testForm2 input").prop("disabled", true);
  8. $("#button21").remove();
  9. $("#button22").remove();
  10.  
  11. //回显附件
  12. Attachment.showDndDownloadAttachments("7890");
  13. }

  不可编辑的回显中,可以进行下载附件操作

  下载

  后记

  不同的业务表单再也不用自己维护附件,直接引入我们通用的附件管理模块,快速实现功能、风格统一

  代码开源

  代码已经开源、托管到我的GitHub、码云:

  GitHub:https://github.com/huanzi-qch/springBoot

  码云:https://gitee.com/huanzi-qch/springBoot

SpringBoot系列——附件管理:整合业务表单实现上传、回显、下载的更多相关文章

  1. 混合表单文件上传到数据库(基于TOMCAT)

    在实际的开发中在实现文件上传的同时肯定还有其他信息需要保存到数据库,就像混合表单在上传完毕之后需要将提交的基本信息插入数据库. 在这个demo中需要用到这个架包来帮助实现 1.定义一个公共类实现文件上 ...

  2. CURL模拟表单post提交及相关常用参数的使用(包括提交表单同时上传文件)

    转载自:https://blog.csdn.net/freedomwjx/article/details/43278157 (注:在curl前面加上time如time curl xxx,可以在最后显示 ...

  3. 表单文件上传,ajax文件上传

    原创链接:http://www.cnblogs.com/yanqin/p/5345562.html html代码  index.jsp(表单文件上传) <form action="sh ...

  4. Django---CBV和FBV的使用,CBV的流程,给视图加装饰器,Request对象方法,属性和Response对象,form表单的上传

    Django---CBV和FBV的使用,CBV的流程,给视图加装饰器,Request请求对象方法,属性和Response响应对象,form表单的上传 一丶CBV和FBV       在Django中存 ...

  5. Java模拟表单POST上传文件

    JAVA模拟表单POST上传文件 import java.awt.image.BufferedImage;import java.awt.image.ColorModel;import java.io ...

  6. Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传)

    form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...

  7. web 表单方式上传文件方法(不用flash插件)

    原理:使用表单的input type="file"标签,通过ajax提交表单请求,后台获取请求中的文件信息,进行文件保存操作 由于我测试用的做了一个上传文件和上传图片方法,所以我有 ...

  8. 在附件管理模块中增加对FTP 上传和预览的支持

    在之前介绍的附件管理模块里面<Winform开发框架之通用附件管理模块>以及<Winform开发框架之附件管理应用>,介绍了附件的管理功能,通过对数据库记录的处理和文件的管理, ...

  9. 如何使用PHP上传文件,上传图片,php上传教程,php表单文件上传教程

    使用PHP进行文件上传,主要使用到表单功能和PHP内置的$_FILES函数功能.接下来我们看如何实现PHP上传功能.例子效果图,此例子是在Mac下进行调试成功的. PHP上传图片文件的功能代码如下: ...

随机推荐

  1. MeteoInfo-Java解析与绘图教程(一)

    MeteoInfo-Java解析与绘图教程(一) 已经进入开发行业很多年了,这两年一直从事气象开发行业,为此对气象绘图有了新的见解 像色斑图与卫星图一直都有python去绘制,在偶然的情况下,我接触到 ...

  2. NOIP 模拟 10 考试总结

    T1 一道很妙的题,打暴力分也很多,但是考试的时候忘开 long long 了. 题解 T2 一道挺水的题,不过...(打挂了) 题解 T3 此题甚妙,转化真多,不过对思维是一个非常大的扩展 题解 考 ...

  3. noip模拟10

    被打回原形了emmmmm 贴张图吧,展示一下根本不行的水平 考试经过 上来浏览一遍T1到T3,读懂题之后发现都不是很可做 T1上了想到了前缀和,往矩阵快速幂想了一下觉得不可做,半小时之后还是只会\(n ...

  4. 微信小程序全局数据globalData的使用问题

    如果在A页面设置全局属性,但在B页面无法使用的话,可能是这个问题: app.js globalData: { helpPage:0, }, A页面 A(e) { getApp().globalData ...

  5. Elastic_Search 和java的入门结合

    1, pom 文件添加依赖... 2, config 配置文件 3, 写接口文件

  6. mzy git学习,禁用Fast forward的普通合并(六)

    git merge --no-ff -m "msg" x-branch:禁用Fast forward的普通合并 通常,合并分支时,如果可能,Git会用Fast forward模式, ...

  7. Python - 面向对象编程 - 实例方法、静态方法、类方法

    实例方法 在类中定义的方法默认都是实例方法,前面几篇文章已经大量使用到实例方法 实例方法栗子 class PoloBlog: def __init__(self, name, age): print( ...

  8. 移动端常用单位——rem

    移动端常用单位: ①px:像素大小,固定值 ②%:百分比 ③em(不常用,但是在首行缩进时可以使用):相对自身的font大小(当自身的字体大小也是em做单位时,才会以父元素的字体大小为基准单位) ④r ...

  9. Tomcat 端口配置及原理详解

    1. tomcat 文件配置详细说明 tomcat服务器需配置三个端口才能启动,安装时默认启用了这三个端口,当要运行多个tomcat服务时需要修改这三个端口,不能相同.端口配置路径为tomcat\ c ...

  10. Nginx+Tomcat+Memcached实现session共享

    实验环境: server1:nginx tomcat memcached server2:tomcat memcached Session是指一个终端用户与交互系统进行通信的时间间隔,通常指从注册进入 ...