FormData Ajax不在PHP中发布数据

时间:2017-12-25 08:50:41

标签: php ajax

希望你能解决我的问题。

问题是我将data放在FormData中但是当我使用echo在php文件中调用它们时,没有值和数据存在并且给了我{{1} }}

  

error

但是当我使用undefined variablevar_dump()时,它会显示所有print_r()。如果我values图像的文件也会引发我var_dump

此处error

html

以下是<form id="form" action="myurl.php" method="post" enctype="multipart/form-data" onsubmit="return false"> <input type="file" name="image" accept="image/*"/> <input type="text" name="description"/> <input type="submit" /> </form> 中的代码:

ajax

现在在我的 function getName(key) { key = document.getElementsByName(key)[0]; return key; } function getId(key) { key = document.getElementById(key); return key; } var url = getId('form').getAttribute('action'); var datas = new FormData(); var xhr = new XMLHttpRequest(); var image = getName('image').value.trim(); var description = getName('description').value.trim(); datas.append('file_image', image.files[0]); datas.append('description', description); xhr.open('POST', url, true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(datas); xhr.onreadystatechange = function() { var OK = 4; var DONE = 200; if(xhr.readyState == 4 && xhr.status == DONE) { alert(xhr.responseText); } } php文件

myurl.php

我们实际上并未使用var_dump($_POST); var_dump($_FILES); 这样的第三方script。我们使用原生jQuery语言。

谢谢。

1 个答案:

答案 0 :(得分:0)

您不必手动附加元素以形成数据,从表单本身创建FormData。

为表单命名name="upload-image

<form id="form" action="myurl.php" name="upload-image" method="post" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*"/>
    <input type="text" name="description"/>
    <input type="submit" />
</form>

在您的Javascript中

var form = document.forms.namedItem("upload-image");
var url = form['action'];
form.addEventListener('submit', function(ev) {

    var oData = new FormData(form);

    var oReq = new XMLHttpRequest();
    oReq.open("POST", url, true);
    oReq.onload = function(oEvent) {
        if (oReq.status == 200) {
            alert(oReq.responseText);
        } else {
            alert(oReq.status + " occurred when trying to upload your file.");
        }
    };

    oReq.send(oData);
    ev.preventDefault();
}, false);