利用easyui和java springboot生成一份前后端文件上传的代码
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件上传</title>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.14/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.14/themes/icon.css">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.14/jquery.easyui.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.14/locale/easyui-lang-zh_CN.js"></script>
<script>
$(function(){
$('#uploadForm').form({
url:'/upload/file',
onSubmit:function(){
return $(this).form('enableValidation').form('validate');
},
success:function(data){
$.messager.alert('提示',data);
}
});
});
</script>
</head>
<body>
<form id="uploadForm" method="post" enctype="multipart/form-data">
<div style="margin:20px;">
<input class="easyui-filebox" name="file" label="选择文件:" required="true" buttonText="浏览" width="300"/>
</div>
<div style="text-align:center;margin:20px;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">上传</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">清空</a>
</div>
</form>
<script>
function submitForm(){
$('#uploadForm').submit();
}
function clearForm(){
$('#uploadForm').form('clear');
}
</script>
</body>
</html>
后端代码：
@RestController
@RequestMapping("/upload")
public class FileUploadController {
@PostMapping("/file")
public String uploadFile(@RequestParam("file") MultipartFile file) {
try {
// 保存文件到本地
String fileName = file.getOriginalFilename();
String filePath = "/path/to/save/" + fileName;
File dest = new File(filePath);
file.transferTo(dest);
// 处理文件
// ...
return "文件上传成功！";
} catch (Exception e) {
e.printStackTrace();
return "文件上传失败！";
}
}
}
其中，前端使用了easyui的文件上传组件，后端使用了SpringBoot的文件上传接口，并将上传的文件保存到本地。你可以根据自己的需求对文件进行处理，并返回上传结果给前端页面
原文地址: https://www.cveoy.top/t/topic/fhxv 著作权归作者所有。请勿转载和采集!