jQuery表单插件：enctype：multipart/form-data和file-upload - 没有JSON返回？

奇怪的问题或错误。我使用的是jQuery Form Plugin，它在任何地方都可以正常工作，我可以在窗体上单击文件上传enctype:multipart/form-data。在这种形式下，我面临着两件奇怪的事情......jQuery表单插件：enctype：multipart/form-data和file-upload - 没有JSON返回？

从服务器返回的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);

任何想法可能是什么造成的？我如何解决这个问题？

提前致谢。

编辑：

我从来没有尝试过，虽然是只要登录对象本身，在这里事实证明，在这种情况下（只有当文件的输入和加密类型设置）的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，这解决我的第一个问题，但是歌剧错误仍然存在！有任何想法吗？

来源

2012-02-20 matt

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

“既然是无法上传使用浏览器的 XMLHttpRequest对象的文件，这个插件使用一个隐藏的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-20 21:03:11 Jkleg

嗯，首先，感谢您为你的答案，我读了我的歌呃你发布上面的小片段的文档的js文件。经过一段时间玩这个东西，甚至实现了两个辅助函数objToString和elementToString，我发现实际上没有这些函数被触发，因为jsonObject不是一个对象而是一个STRING。我更新了我的问题，以便您明白我的意思。我现在所做的是将其转换回JSObject，以便我的问题1得到解决。但是，歌剧的下载仍然存在！有任何想法吗？ – matt 2012-02-21 10:40:28

好的，这可能是一个错误！解决方案是服务器必须使用内容类型的HTML而不是JSON进行响应！随着HTML一切工作得很好！ – matt 2012-02-21 13:20:55

jQuery表单插件：enctype：multipart/form-data和file-upload - 没有JSON返回？

回答

相关问题