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

原创 野人  2022-02-27 09:01  阅读 59 次

是啊,平常如果业务需求没有接触到上传文件的话,只是传一些表单的字段的话,确实在使用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
版权声明:本文为原创文章,版权归 野人 所有,欢迎分享本文,转载请保留出处!
PREVIOUS:已经是最后一篇了

发表评论

  1. 林羽凡
    林羽凡 【农民】 @回复

    这个分享,可以的。