使用AJAX实现上传文件
本文实例为大家分享了使用AJAX实现上传文件的具体代码,供大家参考,具体内容如下
需求:
在前端页面选择文件上传到服务器的指定位置
前端代码
<form id="uploadForm" method="post" enctype="multipart/form-data"> <label >上传电子书</label> <input type="file" name="file" > <button id="upload" type="button" name="button" >上传</button> </form>
$("#upload").click(function () { var formData = new FormData($('#uploadForm')[0]); $.ajax({ type: 'post', url: "https://****:8443/fileUpload", //上传文件的请求路径必须是绝对路劲 data: formData, cache: false, processData: false, contentType: false, }).success(function (data) { console.log(data); alert("上传成功"+data); filename=data; }).error(function () { alert("上传失败"); }); });
首先创建一个FormData实例,也就是空对象,将页面中现有form表单将他初始化。通过AJAX提交给后台
后端代码
@PostMapping(value = "/fileUpload") @ResponseBody public String fileUpload(@RequestParam(value = "file") MultipartFile file, Model model, HttpServletRequest request) { if (file.isEmpty()) { System.out.println("文件为空空"); } String fileName = file.getOriginalFilename(); // 文件名 System.out.println(file.getOriginalFilename()); String suffixName = fileName.substring(fileName.lastIndexOf(".")); // 后缀名 String filePath = "C://pdf//"; // 上传后的路径 fileName = UUID.randomUUID() + suffixName; // 新文件名 File dest = new File(filePath + fileName); System.out.println("pdf文件路径为:"+dest.getPath()); if (!dest.getParentFile().exists()) { dest.getParentFile().mkdirs(); System.out.println("上传pdf文件+++++++++++"); System.out.println("pdf文件路径为:"+dest.getPath()); } try { file.transferTo(dest); } catch (IOException e) { e.printStackTrace(); } String filename = "/pdf/" + fileName; return fileName; }
注意
1.@RequestParam(value = “file”) 中的file需要和input中的name属性一致。
2.提交按钮类型Type=“Button”如果为“submit”的话,提交完数据会刷新一次页面。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
[js]轻便的XMLHttpRequest应用函数:downloadUrl()
[js]轻便的XMLHttpRequest应用函数:downloadUrl()...2007-04-04快速解决ajax传递为空但显示在页面上为undefined的问题
今天小编就为大家分享一篇快速解决ajax传递为空但显示在页面上为undefined的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08js+ajax处理java后台返回的json对象循环创建到表格的方法
这篇文章主要介绍了js+ajax处理java后台返回的json对象循环创建到表格的方法,涉及javascript操作json对象动态创建表格以及基于ajax与后台交互的相关技巧,需要的朋友可以参考下2016-08-08使用wordpress的$wpdb类读mysql数据库做ajax时出现的问题该如何解决
这篇文章主要介绍了使用wordpress的$wpdb类读mysql数据库做ajax时出现的问题该如何解决的相关资料,需要的朋友可以参考下2015-10-10
最新评论