单文件上传保存到本地服务器
本老鸟测试spring boot文件上传, html页面是在resourse下的static里面 用了我的本地上传 保你吃香喝辣! (此文章较冗杂但清晰)
后台: 用multipartFile接收文件 获取文件名 根据uuid生成新的文件名 再用transfetTo把文件存入服务器
@Controller @RequestMapping(value = "/upload",method = RequestMethod.POST) public class controller { @RequestMapping("/uploadTest") @ResponseBody
//指定表单上的file为MultipartFile public Object test1(@RequestParam("file") MultipartFile file, HttpServletRequest request, HttpServletResponse response){ //获取上传文件名,包含后缀 String originalFilename = file.getOriginalFilename(); //获取后缀 String substring = originalFilename.substring(originalFilename.lastIndexOf(".")); //保存的文件名 String dFileName = UUID.randomUUID()+substring; //保存路径 //springboot 默认情况下只能加载 resource文件夹下静态资源文件 String path = "D:/pic/"; //生成保存文件 File uploadFile = new File(path+dFileName); System.out.println(uploadFile); //将上传文件保存到路径 String type = request.getParameter("type"); String name = request.getParameter("name"); System.out.println(type); System.out.println(name); Map<String,Object> map = new HashMap<String, Object>(); map.put("success","200"); map.put("error","失败"); map.put("name",name); try { file.transferTo(uploadFile); } catch (IOException e) { e.printStackTrace(); } return map; } }
前端: 没有用form表单 div小模块拼凑 ajax传输
<div class="form-group"> <label class="col-sm-2 control-label">文件上传</label> <div class="col-sm-10">
/*
accept在这里是上传各种类型的文件 没限制 后期可根据要求限制格式
*/ <input type="file" class="file" id="search_key_file" accept="*"/> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">你要选谁</label> <div class="col-sm-10"> <input type="radio" name="search_key_type" value="谢谢哥" checked> <label>选我吧哥</label> <input type="radio" name="search_key_type" value="谢谢靓仔"> <label>选我吧靓仔</label> </div> </div> <div class="form-group"> <input id="name" type="text" name="name" value="name"> </div> <div class="form-group"> <div class="col-sm-10 col-sm-offset-2" style="margin-top: 10px;"> <button class="btn btn-primary" type="button" onclick="tijiao();"> 确定 </button> </div> </div> </body>
<script type="text/javascript"> function tijiao() { var file_obj = document.getElementById(\'search_key_file\').files[0];//获取文件
/*
input[name="这里写input中name值 radio中name是相同的,在这里我写的^是代表匹配已se开头的 装b下啦 不用研究 后期根据要求更改"]:checked
*/ var type = $("input[name^=\'se\']:checked").val();//获取单选 var name =$("#name").val();//获取名字 var fd = new FormData();//分别放入formdata fd.append(\'file\',file_obj); fd.append(\'type\',type); fd.append(\'name\',name); $.ajax({ url: \'/upload/uploadTest\', type: \'post\', data: fd, dataType: "JSON", processData: false, //不设置的话默认传字符串 文件会传不过去 contentType: false, success:function (map) { if (map.success==200){ alert(map.name+"的信息上传成功"); } }, erroe:function (map) { alert(map.error); } }); } </script>
----------------------------------
如果您认为这篇文章还不错或者有所收获,您可以点击文章下方“推荐”按钮【精神支持】,您的“推荐”将是我最大的写作动力!
欢迎各位转载,但是未经作者本人同意,转载文章之后必须在文章页面明显位置给出作者和原文连接,凡是转载于本人的文章,不能设置打赏功能,如有特殊需求请与本人联系!
成功:
版权声明:本文为zhenxugan原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。