Ajax文件上传（formdata）

最新推荐文章于 2024-04-28 04:01:16 发布

清风半夜鸣蛙

最新推荐文章于 2024-04-28 04:01:16 发布

阅读量1.5k

点赞数

分类专栏： Spring 文章标签： ajax java

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

本文链接：https://blog.csdn.net/H2677lucy/article/details/120797894

版权

Spring 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

学习目标：

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

☞☞☞☞☞☞☞☞☞☞

早风撩我衣，

凉风摸我肌，

若是榜上有我伊，

撩我摸我怎么欺。

清风半夜鸣蛙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax文件上传（formdata）

学习目标：Ajax文件上传。使用到了FormData。预期效果：上传文件到服务器，服务器对文件内容进行统计，统计出当前文章单词出现的频率，然后返回到前端页面进行展示。开始学习：跨站请求伪造_百度百科跨站请求伪造（英语：Cross-site request forgery），也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF，是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。跟跨网站脚本（XSS.
复制链接

扫一扫