即使为表单元素定义了名称属性，JQuery form.serialize() 也会返回空字符串

Posted 2023-05-09

【中文标题】即使为表单元素定义了名称属性，JQuery form.serialize() 也会返回空字符串

【英文标题】：JQuery form.serialize() returns empty string even when name attribute is defined for form elements

【发布时间】：2016-08-15 11:24:08

【问题描述】：

这似乎是一个简单的问题，但现在已经有一个小时让我头疼了。 我有一个表单，它接受用户使用 ajax 提交到服务器的文件。我面临的问题是$(this).serialize()，它总是返回一个空字符串。我已经为输入字段定义了名称属性。功能似乎也是正确的，任何人都可以指出我是否遗漏了什么！

已经有很多类似的问题了，但大多数答案说它需要已经存在的名称属性。

表格：

<form action="/upload" name="upload_form" method="POST" id="upload-form">
    <input type="file" name="file" value=""/><br />
    <input type="submit" name="submit" value="Upload"/>
    <input type="reset" name="clear" value="Clear"/>
</form>

脚本

           $(document).ready(function () 
                $('#upload-form').on('submit', function(e) 
                    e.preventDefault();
                    console.log($(this).serialize());
                    $.ajax(
                        url : $(this).attr('action'),
                        type: "POST",
                        data: $(this).serialize(),
                        success: function (data) 
                            console.log(data);
                        ,
                        error: function (jXHR, textStatus, errorThrown) 
                            alert(errorThrown);
                        
                    );
                );
            );

【参考方案1】：

在处理文件上传时包含enctype="multipart/form-data"。使用ajax时，可以调用和使用FormData对象。所以它会是这样的。

var formFile = new FormData();
        formFile.append('file',$( '#id_of_fileinput' )[0].files[0] );
 $.ajax(
           url: path_to_php,
           type:"POST",
           data: formFile,
           dataType: "json",
           processData: false, //important to include when uploading file
           contentType: false, //important to include when uploading file
           beforeSend: function()
                $('.loading').show();
                $('.masked').show();
           ,
           success: function(data)
                 //do something with data
                console.log(data);
                $('.loading').hide();
                $('.masked').hide();
            
   );

【讨论】：

谢谢，尽管我在浏览器控制台上从$('#id_of_fileinput' )[0].files[0]) 获取文件详细信息，但在服务器上它为空。我在服务器端使用 python - Flask 框架。对图像进行一些自定义操作。如果我进行正常的表单提交，服务器端工作正常。面对ajax的问题​​。用于接收详细信息的 python 代码 - request.form.get('file') 任何建议。 ?

在 ajax 中这个过程应该没问题。唯一的区别是服务器端的处理。这篇文章可能会帮助您了解 python 和烧瓶框架。 ***.com/questions/18334717/…

【参考方案2】：

显然，serialize 方法将您的表单字段数据放在符合 application/x-www-form-urlencoded 内容类型的字符串中，用于将表单提交给服务器进行处理，而文件则在以 multipart/ 编码的请求中提交表单数据内容类型，因此，序列化忽略文件输入。

请参考此信息：

http://www.bayt.com/en/specialties/q/1335/why-a-file-can-t-be-uploaded-through-jquery-serialize-function/