600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > Springboot+easyUI filebox实现单个文件上传

Springboot+easyUI filebox实现单个文件上传

时间:2023-10-08 06:39:51

相关推荐

Springboot+easyUI filebox实现单个文件上传

本篇博客主要采用了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函数报错。加上该注解,文件上传成功后,右下角会有提示框进行提示。

功能演示

按钮页面

文件选取

上传提示

文件夹结果

控制台结果

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。