SpringMVC整合jquery的fileinput插件并上传图片详解
我们都知道,图片上传的存储方案有两种,方案一:存服务器上,方案二:存数据库里。一般需求选择方案一,然后把图片在服务器上的路径存到数据库中,而不是直接把图片存到数据库中。
上传前的准备工作,springMVC默认是开启文件上传拦截器的,所以我们需要关闭它。需要在springmvc.xml的配置文件中添加上传功能的拦截器配置,如果springmvc整合到spring就在spring中添加也可以。
然后加载需要的jar包
然后开始干活
首先在页面引入jquery上传插件fileinput需要的css和js组件,当然还有bootstrap相关组件,这里就不展示了。注意还有css下的img里的显示上传状态的gif动图,其中fileinput_local_zh.js是汉化的提示信息,里面的所有信息并未完全汉化,需要手动修改。
接下来就是上传的主体div,默认的是响应式获取方式:container,可以根据大小设置父级div容器。需要去掉container。
这里重要介绍两个参数:
一: name = file”,也就是springmvc后台接值的参数名为file。这一项默认是没有的,会报错: "请求部分文件不存在"。所以需要手动添加。
二:data-min-file-count="1",设置最小上传文件数。
然后是js部分:
这里展示的是常见的基础配置,高级配置请查阅官方文档。
上传成功以后还有回调函数,当然里面的参数就像ajax请求回调参数一样的使用方式,data一般就是存储回调信息的。
最后是SpringMVC部分:
注意请求方式一定为post:否则报错GET请求不支持。
至此,后台已经可以成功接到文件,至于究竟选择哪种存储逻辑,还需根据具体需求完善。
小白一枚,如有不足之处,欢迎交流斧正!!! 感谢!!!