Question

当表单是硬编码时，提交带有ajaxSubmit()的文件可以正常工作。但是，动态创建表单时，服务器收到的数据为空。

此版本有效

HTML

<form id='file_upload_form' method="POST" enctype="multipart/form-data" action="/upload">
<input type="file" id='myfile' name="myfile" />
<br/>
<input type="submit" />
</form>

<div id='status'> </div>

的JavaScript

jQuery(document).ready(function() {
    jQuery("#file_upload_form").on("submit", function(e) {
        e.preventDefault();

        jQuery(this).ajaxSubmit({
            target: '#status'
        });
    });
});

.on("submit"...中的调试文件，jQuery(this).formSerialize()会产生"myfile=%5Bobject+File%5D"

但此版本使用动态创建的表单发送空数据

HTML

<div id='parent_elem_div'> </div>
<div id='status'> </div>

的JavaScript

jQuery(document).ready(function() {
    var parent_elem = jQuery('#parent_elem_div');

    var new_form_elem = build_form();
    parent_elem.append(new_form_elem);
});

jQuery(document).ready(function() {
    jQuery("#file_upload_form").on("submit", function(e) {
        e.preventDefault();

        jQuery(this).ajaxSubmit({
            target: '#status'
        });
    });
});

但是，.on("submit"...，jQuery(this).formSerialize()中的调试工具会产生""。

此函数构建表单...

//
function build_form (){
    var new_inner_div_elem = document.createElement('div');
    new_inner_div_elem.id = 'parent_elem_div';

    var upload_form = document.createElement('form');
    upload_form.id = 'file_upload_form';
    upload_form.action = '/upload';
    upload_form.method = 'POST';
    upload_form.enctype="multipart/form-data";

    var file_input = document.createElement('input');
    file_input.type = 'file';
    file_input.id = 'file_upload_input';

    var file_upload_submit = document.createElement('input');
    file_upload_submit.type = 'submit'; 

    upload_form.appendChild(file_input);
    upload_form.appendChild(file_upload_submit);

    new_inner_div_elem.appendChild(upload_form);
    return new_inner_div_elem;
}

Answer 1

啊哈！在这里，你的代码：

var file_input = document.createElement('input');
file_input.type = 'file';
file_input.id = 'file_upload_input';

缺少这个：

file_input.attr('name', 'myfile');

这是你的HTML表单中唯一的部分，而动态的部分没有，所以我猜这就是诀窍

如果HTML没有名称，则不会传递给查询字符串或POST数据 - 无法检索它来自PHP 这来自here - stackoverflow

从动态构建的表单提交时，ajaxForm发送空POST

1 个答案: