学习目标：

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) {}

☞☞☞☞☞☞☞☞☞☞

早风撩我衣，

凉风摸我肌，

若是榜上有我伊，

撩我摸我怎么欺。

Ajax文件上传（formdata）相关推荐

ajax文件上传data,ajax文件上传-FormData()
HTML: JS: $("input[type='button']").on('click', upfile); /** * [upfile 文件上传] * @return {[O ...
html5 ajax 文件上传,html5+FormData 实现ajax文件上传
大家都知道在html4时代,上传只能使用表单post提交方式,无法使用ajax(XMLHttpRequest )直接进行表单提交.但在HTML 5的概念形成后,W3C开始考虑标准化XMLHttpReq ...
转: 如何实现jQuery的Ajax文件上传
[PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的. 实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用 ...
关于jQuery在Asp.Net Mvc 框架下Ajax文件上传的实现
1. 实现传统的网络文件上传解决方案首先,我先实现一个传统的网络文件上传方案,建立一个web页面,我还需要一个<form>和两个<input>元素就能解决问题,如在Index ...
Ajax（form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传）
form表单文件上传上菜 file_put.html <form action="" method="post" enctype="multi ...
html如何显示上传进度条,HTML5 Ajax文件上传进度条如何显示
这篇文章主要介绍了HTML5 Ajax文件上传进度条是如何显示的,基于原生html5实现,不需要falsh支持,进度可以自定义显示,控制灵活,对HTML5上传进度条感兴趣的小伙伴们可以参考一下原本打 ...
django中的Ajax文件上传
主要介绍两个 1.ajax文件上传 2.写路由器 3.创建对应的函数 4.file_put.html代码 <!DOCTYPE html> <html lang="en&qu ...
ORM中的事务和锁、Ajax异步请求和局部刷新、Ajax文件上传、日期时间类型的Json、多表查询图书系统
一.ORM中的事务和锁事务事务要确保原子性 """ 事务ACID原子性:不可分隔的最小单位一致性:跟原子性是相辅相成隔离性:事务之间相互不干扰持久性:事务一旦确认永久 ...
ajax 文件上传，ajax
ajax 文件上传,ajax 啥也不说了,直接上代码! <input type="file" id="file" name="myfile&qu ...
使用ajax提交form表单，包括ajax文件上传转http://www.cnblogs.com/zhuxiaojie/p/4783939.html...
使用ajax提交form表单,包括ajax文件上传前言使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){... },&quo ...

Ajax文件上传（formdata）

学习目标：

预期效果：

开始学习：

代码展示：

Ajax文件上传（formdata）相关推荐

最新文章

热门文章