使用 ajax 提交 multipart/form-data 时，文件为空

Posted 2023-05-08

【中文标题】使用 ajax 提交 multipart/form-data 时，文件为空

【英文标题】：When submitting a multipart/form-data with ajax, file is empty

【发布时间】：2014-09-02 03:02:11

【问题描述】：

我在使用 ajax 提交 multipart/form-data 时遇到问题。

html 代码：

<form id='form_foto' method='post' enctype='multipart/form-data'>
   <input type='hidden' id='id_noticia' name='id_noticia' value='"+id_noticia+"' />
   <input name='foto[]' type='file' multiple />
</form>

jQuery 和 Ajax：

          $("#form_foto").submit(function(e)

                $("#form_foto").append("<br />Aguarde...");

                var formData = new FormData(this);

                $.ajax(
                    url: "/PortalGBD/services",
                    type: "POST",
                    data: formData,
                    async: false,
                    dataType: "multipart/form-data",
                    processData: false,
                    contentType: false,
                    success: function(resposta)
                        alert(resposta);
                    
                );
                e.preventDefault(); 
            );
            $("#form_foto").submit();
            self.close();
        

并且文件输入为空的请求：

--------------65942623427134 内容处置：表单数据；名称="id_noticia"

336 -----------------------------65942623427134 内容处置：表单数据；名称=“照片[]”；文件名="" 内容类型：application/octet-stream

--------------65942623427134--

请帮我解决这个问题。谢谢。

【问题讨论】：

contentType: false!?

是的，在所有示例中我都看到了 contentType: false。

【参考方案1】：

请将您的代码var formData = new FormData(this); 中的一行更改为var formData = new FormData($(this)[0]);，然后检查。

当我们创建 FormData 的实例时，我们传递 form[0] 而不是 form.这意味着实际的表单元素，而不是 jQuery 选择器。

【讨论】：

问题依旧，提交的是id_noticia输入，而不是文件输入。

在事件处理程序中 this 是实际元素，而不是 jQuery 对象。

我正在创建一个带有 js 表单的弹出窗口，所以this 是表单。