Question

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

从服务器返回的JSON对象为空！
在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仍然存在！有什么想法吗？

Answer 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写入页面以进行调试。

jQuery Form Plugin：enctype：multipart / form-data和file-upload - 没有JSON返回？

1 个答案: