Question

这似乎是一个简单的问题，但现在已经过了一小时才打破了这个问题。我有一个表单接受用户使用ajax提交给服务器的文件。我遇到的问题是$(this).serialize()，它总是返回一个空字符串。我已为输入字段定义了name属性。功能也似乎是正确的任何人都可以指出，如果我错过了什么！

此处已有许多类似的问题，但大多数答案都说它需要已存在的名称属性。

形式：

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

Answer 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();
            }
   });

Answer 2

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

请参阅此信息：

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

即使为表单元素定义了name属性，JQuery form.serialize（）也会返回空字符串

2 个答案: