背景：springboot 1.5.1 +Thymeleaf 1.5.1 +WebUploader 0.1.5

第一步：去官网下载项目包

第二步：引入CSS和JS

第三步：在页面上准备一个picker按钮和存放文件信息的list容器

第四步：初始化WebUploader，js代码如下

注释：我这里auto赋值为true,表示文件自动上传，所以页面上没有上传按钮，如果赋值为false，则需要添加上传按钮，通过uploader.upload（）方法上传文件；

swf文件路径写自己的路径，我这里是将文件放在js文件夹下；

server就是后台服务器接收的requestmapping；

fileVal这里是我遇到的第一个坑，后台控制层接收就是用这个文件名接收的，默认值为file；

pick选择文件按钮；

accept这里可以配置上传文件的类型，音频视频或者图片之类的，网上有的地方说点击选择文件按钮之后没有弹出选择文件的文件夹是因为mimeTypes没有配置精细，比如我这里应该配置为audio/mp3,audio/wav,audio/mp4;但是我这样配置也没遇到什么问题的；

duplicate很显然true表示可以重复上传，false表示不能重复上传；

这里还有一个问题：!!!比较重要喔，我是java代码，采取表单提交的方式将对象的属性提交到后台去，那么我的属性在哪里定义的呢？我这个文件到底对应的数据库中的哪个字段呢？

在这里，在这里

文件上传执行成功后，调用此方法，response为从后台返回的相应对象，里面有文件上传成功后的Url地址，看看那个input标签，就是那个隐藏的Input标签将文件地址通过name属性赋值给了对象中的属性，嗯嗯，就是这样的

第五步：后台java控制层代码

这里将存入数据库的前缀和文件保存物理路径用配置文件的形式配置的；

因为只有两三个常量需要配置，所以直接在springboot的配置文件里面加了如下代码

然后在控制层用value注解接收配置的值

第六步：上传文件，页面效果如下图

点击上传-------抛异常了；

很显然的，上传文件太大了；

在springboot的配置文件里面配置一下下

springboot1.4后是这么配置，springboot1.4之前配置不需要加前面的Spring.http；

再次上传文件，效果如下

嗯，可以自带参数加一些文字说明的，不过我暂时还没有研究这个，等研究好了之后再写博客上来吧；

第七步：页面回显，效果如下

样式比较丑，但是可以播放和下载，功能实现是没有问题的

页面代码如下：

这里前台的模板用的是Thymeleaf

这里注释一下，我对video标签不熟，之前没有用过，所以犯了个小错，没有加controls这个属性，然后页面一直没有办法显示音频文件，唉，找了好久才发现是这个属性的问题，controls属性规定浏览器为视频提供播放控件，我之前没有添加这个属性也就是浏览器不为我的音频添加播放控件，所以页面上就什么都没有......