纯原生Ajax2.0（不用FormData）实现表单及文件上传

最新推荐文章于 2022-05-10 21:14:25 发布

weixin_34356138

最新推荐文章于 2022-05-10 21:14:25 发布

阅读量2k

点赞数

文章标签：后端 javascript java ViewUI

原文链接：https://juejin.im/post/5cd53252f265da034e7ea8e6

版权

本文介绍了如何使用纯Ajax2.0不依赖FormData来上传表单及文件，详细阐述了表单的四种提交方式及其对服务器的影响，并提供了一种Ajax实现方法，同时通过Node.js进行了后端测试，确保数据正确接收。

摘要由CSDN通过智能技术生成

一、概述

通常我们用Ajax上传文件的时候都会用到FormData,这种方式比较简单。今天介绍一种用纯Ajax上传文件的方式
表单数据可以用一下四种方式进行发送:
1.method:POST,enctype:application/x-www-form-urlencoded (默认编码方式);
2.method:POST,enctype:text/plain;
3.method:POST,enctype:multipart/form-data;
4.method:GET(enctype属性会被忽略).
若表单内容如下：

<form action="xx" method="xx" enctype="xxx" >
   foo: <input type="text" name="foo" />
   baz: <input type="text" name="baz" />
</form>
复制代码

则对于以上四种表单提交方式服务端收到的内容依次对应如下：

Content-Type: application/x-www-form-urlencoded

foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A
复制代码

Content-Type: text/plain

foo=bar
baz=The first line.
The second line.
复制代码

Content-Type: multipart/form-data; boundary=---------------------------314911788813839

-----------------------------314911788813839
Content-Disposition: form-data; name="foo"

bar
-----------------------------314911788813839
Content-Disposition: form-data; name="baz"

The first line.
The second line.

-----------------------------314911788813839--
复制代码

?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
复制代码

二、纯Ajax实现

我们要实现自己的用Ajax进行表单提交，就要根据表单的method和enctype组装出提交给服务器的内容。涉及到新一些的内容有FileReader和TypedArray 具体实现如下：

var AJAXSubmit = (function () {

    if (!XMLHttpRequest.prototype.sendAsBinary) {
        XMLHttpRequest.prototype.sendAsBinary = function (sData) {
            var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);