AJAX:jQuery AJAX api与Javascript xhr

AJAX:jQuery AJAX api与Javascript xhr,javascript,jquery,ajax,html,Javascript,Jquery,Ajax,Html,tl;dr:下面的两个脚本并不完全相同,尽管我相信它们是一样的。为什么? 我会给你一些关于这篇文章的背景信息。我正在尝试构建一个图像上传表单,该表单允许AJAX请求创建一个动态上传页面。因为我了解了HTML5的文件API,所以我尝试在AJAX请求中使用它。我通过以下几个很好的例子构建了自己的实例。我的工作脚本使用straight JS处理AJAX请求,但我尝试构建一个使用jQuery的版本。我的问题是,为什么jQuery版本不能正常工作?据我所知,它是从JS xhr风格的AJAX到jQuery风

tl;dr:下面的两个脚本并不完全相同,尽管我相信它们是一样的。为什么?

我会给你一些关于这篇文章的背景信息。我正在尝试构建一个图像上传表单,该表单允许AJAX请求创建一个动态上传页面。因为我了解了HTML5的文件API,所以我尝试在AJAX请求中使用它。我通过以下几个很好的例子构建了自己的实例。我的工作脚本使用straight JS处理AJAX请求,但我尝试构建一个使用jQuery的版本。我的问题是,为什么jQuery版本不能正常工作?据我所知,它是从JS xhr风格的AJAX到jQuery风格的AJAX的直接端口。(这个问题的重点是对jQuery的AJAX API有一个学术上的理解;因为我已经有了一个工作脚本,我的实际需求已经得到了满足)

以下是正在工作的Javascript AJAX请求:

$("form").submit(function(){

    var file = $("input:file").get(0).files[0];
    var xhr = new XMLHttpRequest();
    var fd = new FormData();

    xhr.open("POST", "/upload", true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    };
    fd.append('img', file);
    xhr.send(fd);

    return false;

});
和非工作jQuery版本:

$("form").submit(function(){

    var fd = new FormData();
    var file = $("input:file").get(0).files[0];
    fd.append('img', file);

    $.post("/upload", fd, function(data){
        alert(data);
    });

    return false;

});        
在中发布时,
$.post
接受普通对象或字符串作为其数据参数。不能使用
FormData

数据
类型:纯对象或字符串
随请求一起发送到服务器的普通对象或字符串


jQuery在第二个参数上调用
$.param
,如果它不是字符串,则调用
$.post
(和其他参数)
fd
不是字符串,而是
$。fd
上的param无效。如果要使用原始
fd
值,必须在ajax设置中将
processData
设置为
false


您的控制台中有错误吗?然后如何将FormData对象转换为PlainObject或String?
$.ajax({
    ur: "/upload",
    data: fd,
    processData: false,
}).done(function (data) {
    console.log(data);
});