jQueryフォームプラグイン：enctype：multipart/form-dataとfile-upload - JSONは返されません。

Question

奇妙な問題またはバグ。私はjQuery Form Pluginを使用しています。そして、フォーム上でenctype:multipart/form-dataという単一のファイルアップロードを持つ1つのフォームでどこでも受け入れ可能です。このフォームで私は、サーバーから返されるJSONオブジェクトが空か

1. ... 2つの奇妙なものを直面しています！
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が文字列であることが判明試したことがない何

オブジェクトではありません。

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を持っており、これが私の最初の問題を修正すること、しかし、オペラ、バグがまだ残っています！何か案は？

Answer 1

ちょうど出発点として、プラグインページ（http://jquery.malsup.com/form/#file-upload）でこのドキュメントを読んだとしますか？応答は実際にアップロードに使用される非表示のiframeに書き込まれるため、ajaxSubmit（）内のJSONにアクセスすることはできません。

「ブラウザの XMLHttpRequestオブジェクトを使用してファイルをアップロードすることはできませんので、フォームのプラグインはタスクで 助けに隠されたiframe要素を使用しています。これは一般的な技術であるが、それは本来の 制限があります。 iframe要素がフォームの サブミット操作のターゲットとして使用されます。つまり、サーバー応答が iframeに書き込まれます。レスポンスの種類がHTMLまたはXMLの場合は問題ありませんが、応答がある場合は も正常に機能しませんタイプがスクリプトまたはJSONの場合、見つかった場合はエンティティ 参照を使用してrepesentedする必要がある文字を含むことが多い HTMLマークアップで。スクリプトやJSONレスポンスの課題を説明するために

、フォーム プラグインは、これらの応答は、textarea要素に埋め込むことを可能にすると ファイルのアップロードと 接続詞で使用する場合は、これらの応答タイプのためにそうすることをお勧めします。ただし、フォームに ファイルが入力されていない場合は、通常のXHRを使用して フォームを送信します（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を書き込んでいることがわかり