今天写到了上传文件部分,记录一下。
前端使用了dropzone.js(用于实现文件上传的JS库),并对此文件进行了细微修改。
说一下思路吧:
首先界面长这样:
点击上传文件,需要弹出一个对话框,对话框中有支持拖拽文件的文件选择框。
注意,此时上传按钮是禁用的。
选择完成后,会有上传进度条。这里为了看到进度条,我选择上传一个比较大的文件。
度条走满之后才可以点击上传按钮。点击上传刷新界面:
可以看到上传成功了。
接下来说一下实现吧:
一、dropzone的文件上传表单
核心就是引入dropzone.js后。添加一个表单标签,设置class="dropzone"。然后dropzone会自动检测到,并做大量的工作。
这里我修改了一下dropzone.js的几行代码。来满足我的需求。
主要是processing和success两个事件。processing表示正在上传的事件,success表示上传成功。可以看到这里当在上传的时候,我让按钮变成不能点击的状态。上传成功后,根据服务器返回的消息Message,把按钮变回可点击状态,然后添加点击函数,让界面重新加载。
二、SpringMVC后台实现
有些请求参数是我业务需求,不用在意,主要是看获得文件保存路径,和file.transferTo(newFile);
在controller中使用MultipartFile file 来接受前端传过来的文件,使用file对象可以获得这个文件的一些属性,比如文件名,文件大小等等。
@RequestMapping(value = "uploadfile.do