jQuery Ajax 文件上传表单数据

Question

我想知道为什么当我使用序列化时它工作正常，但如果我尝试使用 formData 而不是我的 Ajax 似乎不会 'server side'?

我的 HTML :

<form method="post" class="bg-light p-3 h-100 audio" enctype="multipart/form-data">
                                <input type="hidden" name="tab" value="tab7">

                                <fieldset>
                                    <legend class="legend clearfix">Médias
                                        <button type="button" id="addAudio" class="btn btn-first rounded-0 d-block float-right" title="Ajouter un autre fichier">
                                            <i class="far fa-plus"></i>
                                        </button>
                                    </legend>

                                    
                                    <label for="video_file" class="col-form-label col-form-label-sm">Echantillon video <small class="text-muted">(5 Mo, mpeg/webm)</small></label>
                                    <input type="file" name="video_file" id="video_file" class="form-control-file form-control-sm mb-1 video" data-video-item="" accept="video/mpeg,video/webm">

这是我使用的 jQuery :

if($(this).data('changed') == 'yes'){
                var form = $(this).closest('form');
                var formdt = form.serialize();
                var id = <?=($id) ?? '';?>;
                var phpform = '<?=$form;?>';
                

                $.post('<?=$this->url('ajax_products_edit')?>', {'form': formdt, 'id': id, 'phpform': phpform}, function(json){
                    console.log(json);
                    if(json['result'] == 'success'){
                        alert(json.msg); // A VIRER DES QUE LE BUG DE LA SWAL QUI SE ZAP TOUTE SEUL SERA FIX
                        swal("Modifié", json.msg, "success");                       
                    }
                    else if(json.result == 'error') {
                        alert(json.msg); // A VIRER DES QUE LE BUG DE LA SWAL QUI SE ZAP TOUTE SEUL SERA FIX
                        swal( "Oops", json.msg , "error");
                    } 
                    else {
                        alert(json.msg); // A VIRER DES QUE LE BUG DE LA SWAL QUI SE ZAP TOUTE SEUL SERA FIX
                        swal( "Oops", 'Erreur lors de la modification' , "error");
                    }
                })
            }

正如我所说，如果我将 var formdt = form.serialize(); 替换为 var formdt = new formData(form) 什么也没有发生，我以前从未使用过 formData，也许我错过了设置或其他东西。

有人可以帮我解释一下吗？

感谢您的宝贵时间！

Answer 1

...if I replace var formdt = form.serialize(); by var formdt = new formData(form) nothing happen...

是的，出事了！你没有注意到，因为你没有检查console！

TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.

那是...因为你传递了一个jQuery对象。
还记得那条线吗？ var form = $(this).closest('form');

现在，这将正常工作：

var formdt = new formData(form[0])

;)

jQuery Ajax 文件上传表单数据

jQuery Ajax file upload formData

ajax

jquery

form-data