学习目标:
Ajax文件上传。使用到了FormData。
预期效果:
上传文件到服务器,服务器对文件内容进行统计,统计出当前文章单词出现的频率,然后返回到前端页面进行展示。
开始学习:
跨站请求伪造_百度百科跨站请求伪造(英语:Cross-site request forgery),也被称为 one-click attack 或者 session riding,通常缩写为 CSRF 或者 XSRF, 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。跟跨网站脚本(XSS)相比,XSS 利用的是用户对指定网站的信任,CSRF 利用的是网站对用户网页浏览器的信任。https://baike.baidu.com/item/%E8%B7%A8%E7%AB%99%E8%AF%B7%E6%B1%82%E4%BC%AA%E9%80%A0/13777878?fromtitle=CSRF&fromid=2735433&fr=aladdin前端界面向后端传递的参数只有file和_csrf。在Spring Security 有专门的拦截器处理_Csrf。
org.springframework.security.web.csrf.CsrfFilter
代码展示:
前端代码(差点把我整哭了,好久没接触过这些,太难了)
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<body>
<form id="form1" method="post" enctype="multipart/form-data">
<input id="file" type="file" name="file"><br>
<input id="csrf_token" type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<input type="button" value="获取单词频率" onclick="btn()" />
</form>
<div id="commentList" th:fragment="commentList">
<div class="comment" th:each="eg : ${egFrequencyList}">
<span th:text="${eg.egWord}"></span> :
<span th:text="${eg.frequency}"></span>
</div>
</div>
</body>
<script>
function btn() {
var form = document.getElementById("form1");
var formData = new FormData(form);
// //获取文件对象
// var formData = new FormData();
// form.append("_csrf", $('#csrf_token').val()); // 可以增加表单数据
// console.log("$(\"#_csrf\").val()"+ $('#csrf_token').val());
// formData.append("file", $("#file").val());
// formData.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
// formData.append("f1", $("#form1")[0].files[0]);
// console.log(form);
console.log(formData);
$.ajax({
url: "/v1/usual/countegwdfrequency",
method: "POST",
data: formData,
async: false,//同步上传
cache: false,//上传文件无需缓存
processData: false, // 不处理数据
contentType: false, // 不设置内容类型
success: function (result) {
console.info(result);
$("#commentList").html(result);
},
error: function (result){
alert("1");
}
});
}
</script>
</html>
后端代码(_csrf不用我们处理,我们只需要处理一下file即可)
//统计单词频率
@PostMapping(value = "/countegwdfrequency")
public String countEgWordFrequency(Model model, MultipartFile file) {
model.addAttribute("status","R200");
List<EgFrequencyImpl> egFrequencyList = null;
FileInputStream inputStream = null;
try {
egFrequencyList = egWordFrequencyService.countEgWdFrequency(file.getInputStream(),"k");
} catch (IOException e) {
e.printStackTrace();
//记录日志
} finally {
if(inputStream != null){
try {
inputStream.close();
} catch (IOException e) {
//记录日志
e.printStackTrace();
}
}
}
if(egFrequencyList != null && egFrequencyList.size() > 0 ){
model.addAttribute("egFrequencyList", egFrequencyList);
}else{
model.addAttribute("status","R203");
model.addAttribute("egFrequencyList",null);
}
return "usual2 :: commentList";
学习的时候不用关注代码业务逻辑,主要看如何上传的,前端怎么传参数,后端怎么接收。下面的代码就足够了。
//你有一个提交表单form和等待渲染的结果div
<form id="form1" method="post" enctype="multipart/form-data">
<input id="file" type="file" name="file"><br>
<input id="csrf_token" type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<input type="button" value="获取单词频率" onclick="btn()" />
</form>
<div id="commentList" th:fragment="commentList">
<div class="comment" th:each="eg : ${egFrequencyList}">
<span th:text="${eg.egWord}"></span> :
<span th:text="${eg.frequency}"></span>
</div>
</div>
//你有一个提交的方法,方法逻辑就是获取csrf值和value值(这个地方直接用formdata即可)
//,请求到指定的url上
function btn() {
var form = document.getElementById("form1");
var formData = new FormData(form);
console.log(formData);
$.ajax({
url: "/v1/usual/countegwdfrequency",
method: "POST",
data: formData,
async: false,//同步上传
cache: false,//上传文件无需缓存
processData: false, // 不处理数据
contentType: false, // 不设置内容类型
success: function (result) {
console.info(result);
if(result.status = "R200"){
$("#commentList").html(result);
}
},
error: function (result){
alert("1");
}
});
}
// 后端你有一个接收处理文件的接口
//统计单词频率
//我在类上也配置了请求路径/v1/usual
@PostMapping(value = "/countegwdfrequency")
public String countEgWordFrequency(Model model, MultipartFile file) {
}
☞☞☞☞☞☞☞☞☞☞
早风撩我衣,
凉风摸我肌,
若是榜上有我伊,
撩我摸我怎么欺。