jQueryフォームプラグイン：ajaxForm（）がファイルアップロードで動作しません

ここには、jQuery Form Pluginの.ajaxForm（）メソッドで問題があります。可能な限り理解できるように、私は以下のスニペットのコメントに顕著な情報の大部分を含めました。jQueryフォームプラグイン：ajaxForm（）がファイルアップロードで動作しません

ChromeとFirefoxの両方でテストされ、FORM_2はアップロードするファイルを選択すると実際にサーバーに送信されます。問題は、deal_upload_image_file入力が投稿に含まれていないため、サーバーがファイルを受信していないことです。

HTML：

<!-- FORM_1: Big form, I need to position a file input field in here, --> 
<!-- but don't want to submit the file with this form     --> 
<form id="edit_deal_form"> 
    <div id="upload_image_div"> 
    <!-- Javascript appends the "deal_upload_image_file" input here, then --> 
    <!-- appends it to FORM_2 when a file is selected      --> 
    </div> 
</form> 

<!-- FORM_2: A second form that is not visible to user and will --> 
<!-- actually do the post of the multipart data    --> 
<form id="deal_upload_image_form" name="upload_image_form" method="post" enctype="multipart/form-data" action="/upload_image" accept-charset="UTF-8"> 
</form>

のjavascript：

$(function() { 
    add_upload_image_elements(); 
}); 

// Add deal_upload_image_file input to FORM_1, and add onChange handler 
// to immediately POST to server once a file has been selected 
function add_upload_image_elements() { 
    $('<input>').attr("id", "deal_upload_image_file").attr("name", "deal_upload_image_file").attr("type", "file").appendTo($('#upload_image_div')); 
    $('#deal_upload_image_file').change(function() { 
     upload_image(); 
     return false; 
    }); 
} 

// Move the file input to FORM_2, set up the ajaxForm handler, 
// and call submit() on FORM_2. 
// 
// For clean up, clear the file input field and add it back to FORM_1. 
function upload_image() { 
    // This input field is not getting posted with FORM_2 
    // even though I append it here!!! 
    $('#deal_upload_image_file').appendTo($('#deal_upload_image_form')); 

    $('#deal_upload_image_form').ajaxForm({ 
     success: function(response) { 
      alert("Success callback"); 
     }, 
     error: function(response) { 
      alert("Error callback"); 
     } 
    }); 
    $('#deal_upload_image_form').submit(); 

    // clean up 
    $('#deal_upload_image_file').remove(); 
    add_upload_image_elements(); 
}

ありがとう！

出典

2011-07-21 Ben Simmons

2つのフォームを（JavaScriptとは対照的に）HTMLでマージしてテストできますか？基本的に、コード/ JQueryフォームの問題か、$ .appendTo（）の問題ですか？ – ghayes