最代码-泽正的gravatar头像
最代码-泽正2017-11-28 13:49:48

spring mvc+bootstrap实现文件的上传实例

写在开始:

  这个简单的项目中主要用到了spring+springmvc+bootstrap,目的就是通过springmvc实现文件的上传和下载,前台页面使用的bootstrap的文件上传样式,后台根据springmvc实现的文件上传到虚拟路径,在上传之前必须先搭建虚拟服务器,搭建虚拟服务器我的博客中详细说明,请查看就好。

  为了方便需要的牛牛能更好的根据我写的博客实现代码,特此将源码和实例截图分享给需要的牛牛。

正文:

jsp页面:

spring mvc+bootstrap实现文件的上传实例其中要想使用bootstrap的文件上传样式必须引入bootstrap的样式文件和js文件,如上图。

下面我们看看bootstap的上传页面:

spring mvc+bootstrap实现文件的上传实例

注:bootstrap提供了很多文件上传的样式,这里我只引用其中一种,个人觉得这款样式很不错,只是多文件上传并且支持多文件拖拽,并且带有上传进度条等多种样式。

后台代码部分截图:

spring mvc+bootstrap实现文件的上传实例

注:上图中红箭头就代表我们上传的文件的位置,就是我们搭建的虚拟路径的本地文件上传路径。

整个文件上传就这样实现了,简单又大方。下面是实现成功的截图:

spring mvc+bootstrap实现文件的上传实例

注:上图中多个文件同时上传,同时支持拖拽。

接着点击上传我们可以看到实时进度和上传成功的绿色信息。如图:

spring mvc+bootstrap实现文件的上传实例

接着我们就可以在我们配置的虚拟路径可以看到上传的文件:如图

spring mvc+bootstrap实现文件的上传实例

到此,整个文件上传完成。

整个项目结构截图:

spring mvc+bootstrap实现文件的上传实例

写在最后:有需要的牛牛可以下载玩玩,结合我的博客spring mvc实现文件上传到虚拟路径完全可以无压力实现文件上传功能,该项目为maven项目,有问题的可以咨询。


打赏

已有1人打赏

最代码官方的gravatar头像

文件名:UPLOAD.rar,文件大小:378.838K下载
  • /
      • /UPLOAD
        • /UPLOAD/.classpath
          • /UPLOAD/.metadata
              • /UPLOAD/.metadata/src
                  • /UPLOAD/.metadata/src/main
                      • /UPLOAD/.metadata/src/main/webapp
                          • /UPLOAD/.metadata/src/main/webapp/WEB-INF
                            • /UPLOAD/.metadata/src/main/webapp/WEB-INF/faces-config.pageflow
        • /UPLOAD/.project
          • /UPLOAD/.settings
            • /UPLOAD/.settings/.jsdtscope
            • /UPLOAD/.settings/com.genuitec.eclipse.j2eedt.ui.prefs
            • /UPLOAD/.settings/org.eclipse.jdt.core.prefs
            • /UPLOAD/.settings/org.eclipse.m2e.core.prefs
            • /UPLOAD/.settings/org.eclipse.wst.common.component
            • /UPLOAD/.settings/org.eclipse.wst.common.project.facet.core.prefs.xml
            • /UPLOAD/.settings/org.eclipse.wst.common.project.facet.core.xml
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友