jasny-bootstrap组件-文件上传

今天和大家分享jasny-bootstrap如何实现文件上传,以及同form表单同时提交处理。
目前各大网站关于jasny-bootstrap上传文件的案例demo少之又少,就连若依也只是一笔带过,只是做了一个纯效果展示。

经过博主的一番查阅文档,查找案例,终于给搞出来了,在这里呢和大家分享一下。

1:首先引入jasny-bootstrap的js和css。

js和css可以从jasny文档去引用,这里就不多说。

2:jasny关于文件上传的前端代码

按照文档给的demo案例,结合自己的情况进行改造即可

jasny-bootstrap组件-文件上传_第1张图片

3:选择文件后触发事件,可以在这里进行业务,其中e.target.files会获取到文件数组。

选择文件后,我们通过 change.bs.fileinput事件进行上传文件的业务处理。

通过e.target.files获取文件数组,这样我们就拿到文件了,若是需要单独上传,则可以在这里写业务。

但我们要做的是同form表单一同提交,所以不在这里做处理。

jasny-bootstrap组件-文件上传_第2张图片

4:关于提交form表单如何和文件一同提交

jasny-bootstrap组件-文件上传_第3张图片
5:后端处理 ;通过HttpServletRequest接收文件

jasny-bootstrap组件-文件上传_第4张图片

一个完整的流程就这样出来了,注意的是,jasny组件我这里是新增和修改是用的同一个页面,

所以做了jasny的回显图片处理。

当然若是有小伙伴需要设置上传文件类型,可以添加accept属性。

比如我们只想让它上传图片类型,那么我们可以这样写:

   <input type="file"  id="photoID" name="file1" accept="image/*">

这样,在选择文件时就只能选择图片了。(其它类型文件自动给你隐藏了)

jasny-bootstrap组件-文件上传_第5张图片

好了,今天的分享到此结束了。欢迎大家留言互相交流讨论。

你可能感兴趣的:(bootstrap,前端,html)