本篇博客主要采用了springboot+easyui框架,实现用户在前台进行上传文件。
整个过程分为以下两步:
1 前台定义文件框进行文件的选取。
2 用户通过对选取文件进行上传。
前台页面
1 定义文件上传按钮
<a href="#button" class="button icon arrowup" onclick="uploadidalogonline();">上传学习证明材料</a>
2 定义文件框
<div id="uploadonlineinfo" class="easyui-window" style="width:380px;padding:10px 40px" closed="true"><form id="fam" method="post" enctype="multipart/form-data"><table border="0" style="margin-top:4px;" width="100%" align="center"><tr><td><input class="easyui-filebox" name="onlinefilename" data-options="prompt:'文件上传'" style="width:100%"></input></td></tr></table></form><div data-options="region:'south',border:false" style="text-align:center;padding:5px 0 0;"><a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" onclick="uploadonline();" style="width:80px">上传</a></div></div>
3 js函数
<script type="text/javascript">//在线培训上传文件框显示function uploadidalogonline() {$('#uploadonlineinfo').window('open').dialog('setTitle','文件上传');}function uploadonline() {var add="/onlineupload";$('#fam').form('submit',{url: add,onSubmit: function(){},success: function(result){var result = eval('('+result+')');if (result.success){$('#uploadonlineinfo').window('close');$('#dg2').datagrid('reload');$.messager.show({title: 'Success',msg: '上传成功'});} else {$.messager.show({title: 'Error',msg: '文件不能为空,请重新选择文件!'});}}});}</script>
controller处理
1 文件上传函数
public class uploadFile {public static void uploadFile(byte[] file, String filePath, String fileName) throws Exception {File targetFile = new File(filePath);if(!targetFile.exists()){targetFile.mkdirs();}FileOutputStream out = new FileOutputStream(filePath+fileName);out.write(file);out.flush();out.close();}}
2 文件上传
@RequestMapping(value="/onlineupload", method = RequestMethod.POST)@ResponseBodypublic Map<String,String> onlineupload(@RequestParam("onlinefilename") MultipartFile file,HttpServletRequest request) {// String contentType = file.getContentType();Map<String,String> map=new HashMap<>();String fileName = file.getOriginalFilename();System.out.println("fileName"+fileName);String filePath="E:\\fileupload\\";System.out.println("filePath "+filePath);try {uploadFile.uploadFile(file.getBytes(), filePath, fileName);} catch (Exception e) {// TODO: handle exception}//返回jsonSystem.out.println("file + success!");if(file==null){map.put("error","false");}map.put("success","true");return map;}
因为没有加@ResponseBody这个注解,以至于用户前台上传文件的时候,ajax中的success函数报错。加上该注解,文件上传成功后,右下角会有提示框进行提示。
功能演示
按钮页面
文件选取
上传提示
文件夹结果
控制台结果