jQuery表单插件:enctype:partipart/Form数据和文件上传-不返回JSON

jQuery Form Plugin: enctype:multipart/form-data and file-upload - no JSON returning?

本文关键字：文件 JSON 返回 数据 插件 表单 enctype partipart Form jQuery      更新时间：2023-09-26

奇怪的问题或错误。我使用的是jQuery Form插件，它在任何地方都很好接受一个表单，在这个表单上我有一个带有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错误仍然存在！有什么想法吗？

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

"由于无法使用浏览器的XMLHttpRequest对象，表单插件使用隐藏的iframe元素帮助完成任务。这是一种常见的技术，但它有固有的局限性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写入页面以进行调试。

相关文章：