javascript - 无法使用 POST AJAX Javascript 向 PHP 发送文件 + form_data

Question

使用 GET 方法，我能够使用 AJAX 成功地将表单数据 + 文件 + 其他数据发送到 PHP。我得到了想要的结果——$_GET & $_FILES

xmlhttp.open("GET", "data.php?controlData="+controlData+"&form_data="+thisFormElements,true);
xmlhttp.send(files);

但是，使用 POST 方法，我无法在 PHP 中获取 $_FILES，我不确定如何使用 xmlhttp.send() 将文件 + FormData 发送到 PHP，所以我得到了 $_GET 和 $_FILES

如果可能的话，我希望仅使用 Javascript 而不是 Jquery 来实现这一点

xmlhttp.open("POST", "data.php", true);  
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-Type", "multipart/form-data");
xmlhttp.send("controlData="+controlData+"&form_data="+thisFormElements+files);

PFB 整个 Ajax 代码

            function ajax(controlData,thisFormSubmitElement){
                var controlData = JSON.parse(controlData);
                controlData = JSON.stringify(controlData);
                var todiv = controlData['todiv'];
                var form_vals = [];
                var form_nams = [];
                var formkeyvalobj = {};
                var thisFormElements = thisFormSubmitElement.form.elements;
                var files = new FormData();

                // Creating Key value pair for form elements BEGINS
                for(var x = 0; x < thisFormElements.length; x++){
                    if(thisFormElements[x].type === "file"){
                        var fileToUpload = document.getElementById(thisFormElements[x].id);
                        files.append(thisFormElements[x].name, fileToUpload.files[0]); 
                        form_vals[form_vals_len] = ""; 
                        form_nams[form_vals_len] = thisFormElements[x].name;
                        formkeyvalobj[form_nams[form_vals_len]] = form_vals[form_vals_len];
                        }else{
                        form_vals[form_vals_len] = thisFormElements[x].value;
                        form_nams[form_vals_len] = thisFormElements[x].name;
                        formkeyvalobj[form_nams[form_vals_len]] = form_vals[form_vals_len];
                    }
                }
                thisFormElements = encodeURIComponent(JSON.stringify(formkeyvalobj));
                // Creating Key value pair for form elements ENDS

                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200 || this.readyState == 4 && this.status == 401) {
                        document.getElementById(todiv).innerHTML = this.responseText;
                    }
                };

                // GET METHOD WORKS - In Php I Get $_GET & $_FILES

                xmlhttp.open("GET", "data.php?controlData="+controlData+"&form_data="+thisFormElements,true);
                    xmlhttp.send(files);   

                    // POST METHOD DOES NOT WORK - In Php I Get $_POST BUT I DO NOT GET --- $_FILES

                    xmlhttp.open("POST", "data.php", true);  
                    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                    xmlhttp.setRequestHeader("Content-Type", "multipart/form-data");
                    xmlhttp.send("controlData="+controlData+"&form_data="+thisFormElements+files); 
                }

标签： javascriptphpajax