0
点赞
收藏
分享

微信扫一扫

使用AJAX实现上传文件

这篇文章主要介绍了使用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”的话,提交完数据会刷新一次页面。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

举报

相关推荐

0 条评论