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

Question

奇怪的问题或错误。我正在使用 jQuery 表单插件，它在任何地方都可以正常工作，在我有一个表单的地方接受在表单上使用 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 是一个 STRING 而不是一个目的。

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，这解决了我的第一个问题，但是 opera-bug 仍然存在！有什么想法吗？

Answer 1

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

“由于无法使用浏览器上传文件
XMLHttpRequest 对象，表单插件使用隐藏的 iframe 元素来
帮助完成任务。这是一种常见的技术，但它有其固有的特点
限制。 iframe 元素用作表单的目标
提交操作意味着服务器响应被写入
iframe。如果响应类型是 HTML 或 XML，这没问题，但是
如果响应类型是脚本或 JSON，则效果不佳
其中通常包含需要使用实体来表示的字符
在 HTML 标记中找到引用。

为了解决脚本和 JSON 响应的挑战，表单
插件允许将这些响应嵌入到文本区域元素中
建议您在使用这些响应类型时这样做
与文件上传结合。但请注意，如果有
表单中没有文件输入则请求使用普通 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 方法在这里对您来说很重要...请注意，他正在编写将数据返回到页面以进行调试。