本文实例为大家分享了使用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”的话,提交完数据会刷新一次页面。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持悠久资源网。
您可能感兴趣的文章:
- jQuery Ajax 上传文件处理方式介绍(推荐)
- 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
- 使用ajaxfileupload.js实现ajax上传文件php版
- ajax(iframe)无刷新提交表单、上传文件
- jQuery插件ajaxfileupload.js实现上传文件
- Ajax serialize() 表单进行序列化方式上传文件
- ajax使用formdata上传文件流
- jsp+ajax实现无刷新上传文件的方法
- 使用FormData进行Ajax请求上传文件的实例代码
- Asp.net MVC中使用JQuery插件ajaxFileUpload上传文件