jQuery 表单插件：enctype:multipart/form-data 和文件上传 - 没有 JSON 返回？

Question

奇怪的问题或错误。我正在使用jQuery Form Plugin，它在任何地方都可以正常工作，接受一个表单，我在表单上有一个带有enctype:multipart/form-data 的文件上传。在这个表格中，我面临着两件奇怪的事情……

1. 服务器返回的 JSON 对象为空！
2. 在 Opera 中，提交按钮甚至会触发文件下载！

但是，只有当我将 enctype:multipart/form-data 和 input type="file" 留在表单中时，才会发生这种情况。没有它，一切正常，JSON 对象返回正确 - 并且在 Opera 中没有下载。

HTML：

<form accept-charset="UTF-8" action="/ajax/profiledetails" id="profileAboutMeForm" method="post" novalidate="novalidate" encoding="multipart/form-data" enctype="multipart/form-data">

    ...

    <p class="rel avatarUpload">
        <label class="label" for="profileAvatar">Choose Avatar</label>
        <img class="profileAvatar avatar30" src="" alt="user">
        <input class="fileUpload br3" id="profileAvatar" name="profile[avatar]" type="file">
    </p>

    ...

</form>

jQuery:

$(formId).ajaxSubmit({
        type: "POST",
        cache: false,
        resetForm: reset,
        dataType: "text json",
        success: function(jsonObject, status) {

            console.log("status + ", jsonObject.status: "+ jsonObject.status + ", jsonObject.data: " + jsonObject.data);

知道是什么原因造成的吗？我该如何解决？

提前致谢。

编辑：

虽然我从未尝试过只记录对象本身，但事实证明，在这种情况下（仅当设置了文件输入和 enctype 时）jsonObject 是一个字符串而不是一个对象。

if (typeof jsonObject == 'string')
        console.log('yes, it's a string'); //yes, it's a string
        jsonObject = JSON.parse(jsonObject);

console.log(jsonObject);

所以，这意味着我的 javascript 中再次有一个 JSObject，这解决了我的第一个问题，但是歌剧错误仍然存​​在！有什么想法吗？

Answer 1

作为一个起点，我假设您已经阅读了插件页面http://jquery.malsup.com/form/#file-upload 上的相关文档？您将无法访问 ajaxSubmit() 中的 JSON，因为响应实际上是写入用于上传的隐藏 iframe。

“由于无法使用浏览器的 XMLHttpRequest 对象，Form Plugin 使用隐藏的 iframe 元素 帮助完成任务。这是一种常见的技术，但它具有固有的 限制。 iframe 元素用作表单的目标 提交操作，这意味着服务器响应被写入 内嵌框架。如果响应类型是 HTML 或 XML，这很好，但是 如果响应类型是脚本或 JSON，则两者都不起作用 通常包含需要使用实体来表示的字符 在 HTML 标记中找到时的引用。

为了解决脚本和 JSON 响应的挑战，表单 插件允许将这些响应嵌入到 textarea 元素中，并且 建议您在使用这些响应类型时这样做 与文件上传结合。但请注意，如果有 表单中没有文件输入，则请求使用普通 XHR 提交 表单（不是 iframe）。这会给您的服务器代码带来负担 知道何时使用文本区域，何时不使用。如果你喜欢，你可以使用 插件的 iframe 选项强制它始终使用 iframe 模式，然后您的服务器始终可以将响应嵌入到文本区域中。”

这是他在示例页面上使用的代码：

$('#uploadForm').ajaxForm({
  beforeSubmit: function(a,f,o) {
    o.dataType = $('#uploadResponseType')[0].value;
    $('#uploadOutput').html('Submitting...');
  },
  success: function(data) {
    var $out = $('#uploadOutput');
    $out.html('Form success handler received: <strong>' + typeof data + '</strong>');
    if (typeof data == 'object' && data.nodeType)
      data = elementToString(data.documentElement, true);
    else if (typeof data == 'object')
      data = objToString(data);
    $out.append('<div><pre>'+ data +'</pre></div>');
  }
});

success 方法在这里对您很重要...请注意，他正在将返回 data 写入页面以进行调试。