JAVA全系列 教程
3762个小节阅读:7094.2k
目录
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
之前的上传方案,在上传成功后都会跳转页面。而在实际开发中,很多情况下上传后不进行跳转,而是进行页面的局部刷新,比如:上传头像成功后将头像显示在网页中。这时候就需要使用异步文件上传。
编写JSP页面,引入jQuery和jQuery表单上传工具jquery.form.js
xxxxxxxxxx
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>上传</title>
<script src="/js/jquery-2.1.1.min.js"></script>
<script src="/js/jquery.form.js"></script>
</head>
<body>
<h3>文件上传</h3>
<form id="ajaxForm" enctype="multipart/form-data" >
<input type="file" name="file"/>
<%-- 按钮类型不能是submit,否则会刷新页面 --%>
<input type="button" value="上传头像" id="btn"/>
</form>
<%-- 上传头像后展示的位置 --%>
<img src="/" width="100" id="img">
<script>
$(function () {
$("#btn").click(function () {
// 异步提交表单
$("#ajaxForm").ajaxSubmit({
url:"/fileUpload4",
type:"post",
success:function (data) {
$("#img").attr("src",data);
}
})
})
})
</script>
</body>
</html>
编写控制器接收异步上传请求
xxxxxxxxxx
@RequestMapping("/fileUpload4")
@ResponseBody
public String upload4(MultipartFile file,HttpServletRequest request) throws Exception {
// 创建文件夹,存放上传文件
String realPath = request.getServletContext().getRealPath("/upload");
File dir = new File(realPath);
if (!dir.exists()){
dir.mkdirs();
}
// 将上传的数据写到文件夹的文件中
String filename = file.getOriginalFilename();
filename = UUID.randomUUID()+"_"+filename;
File newFile = new File(dir, filename);
file.transferTo(newFile);
// 返回文件的路径
return "/upload/"+filename;
}
实时效果反馈
1. jQuery表单上传工具jquery.form.js
异步表单提交方法为
A ajaxSubmit
B submit
C ajax
D 以上都可以
答案
1=>A