使用JQuery里面的$.ajax方法如何上传文件？

是啊，平常如果业务需求没有接触到上传文件的话，只是传一些表单的字段的话，确实在使用JQuery里面的$.ajax方法，就会遇到些问题了，比如不动怎么使用啊，为什么上传不了文件的这一系列的问题，那么我们该怎么办呢，不着急，且听野人慢慢将来，教你怎么写，就可以正确的上传文件了。

首先，在JQuery里面如果你用$.ajax，默认是会把数据进行处理的，也就是转换成查询表单字符串（a=1&b=2）这类的形式。

所以，我们已经告诉$.ajax，我们正在进行文件上传的，是不需要进行转换数据的处理，而对应的代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JQuery中的$.ajax上传文件实例代码</title>
  </head>
  <body>
    <form onsubmit="return submitFile(this)" enctype="multipart/form-data">
      文件:<input type="file" name="file" />
      <input type="submit" value="提交" />
    </form>
    <script>
      function submitFile(ele) {
        let formData = new FormData(ele);
        $.ajax({
          type: "post",
          url: "后端上传文件的API地址",
          data: formData,
          cache: false,
          processData: false,//不处理数据
          contentType: false,
        })
          .success(function (data) {
            alert("上传成功",data);
          })
          .error(function () {
            alert("上传失败");
          });
      }
    </script>
  </body>
</html>

上面代码中，关键的部分我也加上了注释，如果有不明白的话，欢迎讨论，留言。

本文地址：https://www.yerenwz.com/5777.html
版权声明：本文为原创文章，版权归野人所有，欢迎分享本文，转载请保留出处！

发表评论 取消回复

发表评论取消回复