0

tl；博士：尽管我相信它们是相同的，但下面的两个脚本并不相同。为什么？

我会给你一些关于这篇文章的背景信息。我正在尝试构建一个图像上传表单，该表单发出 AJAX 请求以创建动态上传页面。因为我了解了 HTML5 的 File API，所以我试图在 AJAX 请求中使用它。我按照MDN上的一些不错的示例构建了自己的实例。我的工作脚本对 AJAX 请求使用直接的 JS，但我尝试构建一个使用 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;

});
4

2 回答 2

1

As posted in the documentation, $.post accepts either a plain object or a string as its data argument. You cannot use FormData.

data
Type: PlainObject or String
A plain object or string that is sent to the server with the request.

于 2013-03-20T04:38:44.093 回答
1

如果它不是字符串， jQuery 会调用（和其他）$.param的第二个参数。不是字符串，但on无效。如果要使用原始值，则必须在ajax 设置中设置为：http: //api.jquery.com/jQuery.ajax/$.postfd$.paramfdfdprocessDatafalse

$.ajax({
    ur: "/upload",
    data: fd,
    processData: false,
}).done(function (data) {
    console.log(data);
});
于 2013-03-20T04:44:03.327 回答