Axios和Jquery实现文件上传功能
更新时间：2022年08月15日 10:44:21 作者：DanceDonkey
这篇文章主要为大家详细介绍了Axios+Jquery实现文件上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Axios和Jquery实现文件上传的具体代码，供大家参考，具体内容如下
Jquery上传
jquery文件时，后端好像并没有经过SpringMVC处理，没有被封装成一个MultiPartFIle对象，可通过原生的Servlet API request.getInputStream()获取。至于为什么没被SpringMVC封装成MultipartFile对象目前还没有研究透彻。可能是请求内容类型没有设置成 multipart/form-data。下面是jquery上传文件的代码示例，文件名，文件大小等参数可通过拼在url后面使用request.getParameter()获取。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="jquery.js"></script>
<script src="axios.js"></script>
<body>
请上传图片：<input type="file" name="file" id="file" onchange="fileChange(this)">
<br>
<button onclick="jqueryUpload()">jquery提交</button>
</body>
<script>
var file = undefined
function fileChange(data){
file = data.files[0]
}
function jqueryUpload(){
$.ajax({
url:"/jqueryUpload?filename=test.jpg",
type:"post",
data:file,
contentType:false,
processData:false,
success(res){
console.log('上传结果' + res)
}
})
}
</script>
</html>@PostMapping("jqueryUpload")
public String jqueryUpload(HttpServletRequest request, MultipartFile file) throws Exception{
System.out.println(file);
String fileDesc = "D:\\2022\\" + request.getParameter("filename");
FileOutputStream outputStream = new FileOutputStream(fileDesc);
ServletInputStream inputStream = request.getInputStream();
byte[] bytes = new byte[1024];
int line = inputStream.read(bytes);
while (line != -1){
outputStream.write(bytes,0,line);
line = inputStream.read(bytes);
}
inputStream.close();
outputStream.close();
return "success";
}此时后台打印的multipartfile是null。后续会深入研究·······…
Axios上传
axios上传不同于jquery，axios将上传的二进制数据和其他参数封装在了FormData对象中，值得注意的是，此时的内容类型要改为multipart/form-data。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="jquery.js"></script>
<script src="axios.js"></script>
<body>
请上传图片：<input type="file" name="file" id="file" onchange="fileChange(this)">
<br>
<button onclick="jqueryUpload()">jquery提交</button>
<button onclick="axiosUpload()">axios提交</button>
</body>
<script>
var file = undefined
function fileChange(data){
file = data.files[0]
}
function axiosUpload(){
var formData = new FormData();
formData.append("file",file);
formData.append("filename","myfile.jpg")
axios.post("/axiosUpload",formData,{
headers:{ "Content-Type" : "multipart/form-data" }
}).then(res => {
console.log('上传结果' + res)
})
}
</script>
</html>@PostMapping("axiosUpload")
public String axiosUpload(HttpServletRequest request,MultipartFile file)throws Exception{
InputStream inputStream = file.getInputStream();
String fileDesc = "D:\\2022\\" + request.getParameter("filename");
FileOutputStream os = new FileOutputStream(fileDesc);
byte[] bytes = new byte[1024];
int line = inputStream.read(bytes);
while (line != -1){
os.write(bytes,0,line);
line = inputStream.read(bytes);
}
inputStream.close();
os.close();
return "success";
}感觉还是更喜欢axios这种，明确指定了内容类型并且经过了SpringMVC处理。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了jQuery实现的可编辑表格,结合完整实例形式分析了jQuery响应鼠标事件动态操作页面元素样式与属性的相关技巧,需要的朋友可以参考下2016-06-06
jQuery插件学习教程之SlidesJs轮播+Validation验证
这篇文章主要介绍了jQuery插件学习教程之SlidesJs轮播+Validation验证的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
解决jQuery与其它js(Prototype)库冲突的方法很简单，就是使用jQuery的jQuery.noConflict()函数，以下小编就为大家介绍，需要的朋友可以参考下2013-07-07
本文讲解了如何采用PHP+MySQL+jQuery,实现随意拖动层并即时保存拖动位置。 十分的实用，有需要的小伙伴可以参考下。2015-04-04
这篇文章介绍了基于jQuery实现的一个简单大方的垂直导航菜单，过度平滑,需要的朋友可以参考下2015-08-08
快速学习jQuery插件中的Cookie插件使用方法，一个轻量级的cookie插件，可以读取、写入、删除 cookie，感兴趣的小伙伴们可以参考一下2015-12-12
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
这篇文章主要介绍了jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作,结合实例形式分析了jQuery+Ajax请求json格式数据并渲染到html页面相关步骤与操作技巧,需要的朋友可以参考下2020-06-06
本文搜集了大量 jQuery 表格插件，帮助 Web 设计者更好地驾御 HTML 表格，你可以对表格进行横向和竖向排序，设置固定表头，对表格进行搜索，对大表格进行分页，对表格进行滚动，拖放操作等等。这些插件很多都包含详细的教程。2010-04-04
这篇文章主要为大家详细介绍了jquery Banner轮播选项卡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要为大家详细介绍了jquery实现具有嵌套功能的选项卡的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-02-02
最新评论