1

奇妙な問題またはバグ。私はjQuery Form Pluginを使用していますが、フォーム上で単一のファイルアップロードを行う1つのフォームを受け入れる場所ならどこでも問題なく動作しますenctype:multipart/form-data。このフォームでは、2 つの奇妙なことに直面しています…</p>

  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);

何が原因でしょうか？どうすればそれを修正できますか？

前もって感謝します。

編集：

私が試したことはありませんが、オブジェクト自体をログに記録するだけでしたが、この場合 (file-input と 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 のバグはまだ残っています。何か案は？

4

1 に答える 1

1

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

「ブラウザの 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デバッグ目的でページへのリターンを書いていることに注意してください。

于 2012-02-20T21:03:11.623 に答える