1

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

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

但是，只有当我将enctype:multipart/form-dataand留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，这解决了我的第一个问题，但是歌剧错误仍然存​​在！有任何想法吗？

4

1 回答 1

1

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

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

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

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

$('#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页面以进行调试。

于 2012-02-20T21:03:11.623 回答