Ajax文件上传（formdata）

学习目标：

Ajax文件上传。使用到了FormData。

预期效果：

上传文件到服务器，服务器对文件内容进行统计，统计出当前文章单词出现的频率，然后返回到前端页面进行展示。

开始学习：

跨站请求伪造_百度百科跨站请求伪造（英语：Cross-site request forgery），也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF，是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。/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=""><head><script src="/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) {}

☞☞☞☞☞☞☞☞☞☞

早风撩我衣，
凉风摸我肌，
若是榜上有我伊，
撩我摸我怎么欺。