springboot使用ajax上传文件

SpringBoot使用Ajax上传文件

接上一个上传文件操作上次使用的是from表单进行提交

这次我们使用ajax进行提交

地址在这儿：springboot上传文件

上次controller层已经写好了这次直接开写html

首先我们先写一下基本的html

第一行是用来存放我们上传完返回的信息的

<div id="fileUrl"></div>
<input type="file" id="file">
<input type="button" value="提交" onclick="uploadFile()">

写完之后我们写uploadFile()

这里我们使用jq

$("#file")[0]就是吧jq对象转换为js对象

我们获取files里面的第一个这就是单个文件上传

多个文件上传那就是整个数组了这个大家能理解吧

var file=$("#file")[0].files[0];
var formData = new FormData();
formData.append("file",file);

最后呢就是ajax进行提交这个就比较简单了

$.ajax({type:"post",url:"/upload",processData: false,contentType:false,data:formData,success:function (msg) {$("#fileUrl").html(msg);}
})

说到ajax我们可以学习一下

属性（参数）

type 请求类型

url 请求地址

data 请求参数

dataType 返回的数据类型

context 参数作用将回调里的this替换为context里对应的值

contentType 发送信息至服务器时内容编码类型默认值为"application/x-www-form-urlencoded"

xhr 需要返回一个 XMLHttpRequest 对象

options AJAX 请求设置

username HTTP 访问认证请求的用户名

password HTTP 访问认证请求的密码

async 默认设置下为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。

回调函数

success 成功函数

error 失败函数

complete(xhr, ts) 请求完成后回调函数 (请求成功或失败之后均调用)。

complete 当请求完成之后调用这个函数，无论成功或失败。传入 XMLHttpRequest 对象，以及一个包含成功或错误代码的字符串。

以上都是ajax常用的一些参数和回调函数

下面是完整的java和html代码

java代码

 SimpleDateFormat sdf=new SimpleDateFormat("/yyyy-MM-dd/");@PostMapping("/upload")public String file(MultipartFile file, HttpServletRequest request){String format =  sdf.format(new Date());String realPath = request.getServletContext().getRealPath("/img") + format;//创建文件夹路径File folder = new File(realPath);//如果文件夹已经不存在那么我们就创建一下if(!folder.exists()){folder.mkdirs();}String originalFilename = file.getOriginalFilename();String newName = UUID.randomUUID().toString() + originalFilename.substring(originalFilename.lastIndexOf("."));try {file.transferTo(new File(folder,newName));String url=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+"/img"+format+newName;return url;} catch (IOException e) {e.printStackTrace();}return "error";}

html代码

    <div id="fileUrl"></div><input type="file" id="file"><input type="button" value="提交" onclick="uploadFile()"><script>function uploadFile() {var file=$("#file")[0].files[0];var formData = new FormData();formData.append("file",file);$.ajax({type:"post",url:"/upload",processData: false,contentType:false,data:formData,success:function (msg) {$("#fileUrl").html(msg);}})}</script>