У меня проблема с методом .ajaxForm () плагина jQuery Form . Чтобы сделать все как можно более понятным, я включил большую часть существенной информации в комментарии с фрагментами ниже.
Протестировано в 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();
}
Спасибо!