Question

我正在为我们的客户创建一个联系表单，用我们自己的域创建网页。我们为他们提供托管和网络编辑器来创建他们的网站。当他们在他们的网站上创建联系表格时，无论谁访问他们的网站并填写表格与他们联系，它都会被发送到我们的平台，它会向我们的客户发送一封电子邮件，通知他/她有人填写了他/她的联系表格。

为了使其正常运行，我们在客户网页中使用jsonp ajax调用将表单发送到我们的平台，该平台执行电子邮件模板并发送电子邮件。

现在的问题是我们的客户要求添加input字段类型，以允许访问其网页的任何人将文件附加到表单，这样他们就可以在联系人通知电子邮件中看到附件，但是我找不到使用jsonp的方法，因为它使用GET方法创建了一个跨域请求，并且我已经在Stackoverflow中进行了讨论，讨论了如何使用POST方法发送带有表单的文件并获取表单数据new FormData()。

以下是我在尝试实施之前的代码：

var $form = $('form');
$form.submit(function(e){
    e.preventDefault();
    $.ajax({
        url: url,
        dataType: "jsonp",
        data: $form.serialize(),
        beforeSend: function () {
            $form.data('allowSending', false); // To prevent multiple sendings while processing
        },
        success: function(data) {
            alert(data.message);
            $form.data('allowSending', true);
        }
    });
});

这是我尝试过的代码，但未按预期处理：

var $form = $('form');
$form.submit(function(e){
    e.preventDefault();
    $.ajax({
        url: url,
        processData: false,
        contentType: false,
        dataType: "jsonp",
        data: new FormData(this),
        beforeSend: function () {
            $form.data('allowSending', false); // To prevent multiple sendings while processing
        },
        success: function(data) {
            alert(data.message);
            $form.data('allowSending', true);
        }
    });
});

当它使用我尝试的代码（第二个）发送填充的表单时，尝试通过URL将数据作为对象发送，如：?callback=jQuery111107622947758095266_1459251318335&[object%20FormData]&_=1459251318336

我该如何解决这个问题？

提前致谢。

问候。

PS：为了让事情变得更难，表单是完全动态的，所以如果解决方案是手动传递参数等，那么它必须采用for循环的动态方式。

Answer 1

简短的回答是你不能。

您的尝试失败是因为，由于JSONP发出GET请求，contentType被忽略，data被视为字符串（因为您说processData: false）。

正如您所说，JSONP的工作原理是对URL中的所有内容进行编码。虽然可以使用the File API来读取文件的内容并将其转换为base64编码的字符串，但这将超过除最小文件之外的所有文件的URL长度限制，这使得它不切实际。

停止使用JSONP。这是一个坦率的肮脏的黑客行为，习惯于围绕同源政策。我们现在有CORS，这是一种标准的，非hacky，高度灵活的方法，可以选择性地禁用相同的原始策略。其灵活性的一个优点是您可以使用它来发出跨域POST请求。

JQuery AJAX - 发送带有附加文件的JSONP表单

1 个答案: