通过jQuery和FormData的Ajax POST请求 - $ _POST在PHP上为空

Question

问

通过jQuery和FormData的Ajax POST请求 - $ _POST在PHP上为空

往事不可味nd 发布于 2023-02-12 20:50

我希望使用jQuery和FormData通过ajax将图像上传到服务器.

我的jQuery代码如下

var formData = new FormData("form")[0];
  var fileName = $("#InputLogo")[0].files[0].name;

  $.ajax ( {
      url : 'upload.php',
      type : 'POST',
      data : { "data" : formData, "fileName" : fileName },
      processData : false,
      success : function(data) {
          console.log(data);
          alert(data);
      }
  });

当用户选择要上载的新文件时,将调用此代码.

我的服务器后端是PHP,它按如下方式处理请求

$data = $_POST['data'];
$fileName = $_POST['fileName'];
$fp = fopen('/img/'.$fileName, 'w');
fwrite($fp, $data);
fclose($fp);
$returnData = array("data" => $data);
print_r($_POST);

POST请求确实发生,但$ _POST仍为空.

我试着寻找解决方案,但找不到一个确切的解决方案.

任何建议,将不胜感激.

编辑: 这是HTML中的表单


      
    Name of the Company
    
    
    
    Email
    
    
    
    Choose a company logo
    
    For good visibility, please limit the image to 200 x 200 px

Jonathan Lon.. 14

该FormData()构造不是一个选择器引擎,它并不代表类似阵列的集合,因此var formData很可能等于undefined.

要使用它,您必须找到第

一个并将其传递给构造函数:

var form = $('form')[0];
var formData = new FormData(form);

如果它在,它应该已经包括在内formData.但是,如果不是,你也.append()可以:

var inputLogo = $("#InputLogo")[0];
formData.append(inputLogo.name, inputLogo.files[0]);

并且,设置formData为data发送,告诉jQuery不要假设contentType它:

// ...
    data : formData,
    contentType : false,
    processData : false,
// ...

那么,它fileSize应该在PHP的$_FILES集合中可用:

$fileName = $_FILES['inputLogo']['name'];

小智.. 8

我知道这是一个老帖子,但是当我试图为自己解决一个类似的问题时我遇到了它,并且没有一个回复指出这个问题,所以我发布了一个回复以防其他人发现他/她自己情况.

事实证明,正如另一篇StackOverflow帖子所述:

如果输入标签没有名称,表单数据是否仍会传输？

如果您的文件输入元素没有非空名称属性,则不会在请求中发送该元素的数据.

所以你的输入元素:

应该:

或者文件不会与表单数据一起发送.

3 个回答

该FormData()构造不是一个选择器引擎,它并不代表类似阵列的集合,因此var formData很可能等于undefined.

要使用它,您必须找到第<form>一个并将其传递给构造函数:
```
var form = $('form')[0];
var formData = new FormData(form);
```
如果<input type="file">它在<form>,它应该已经包括在内formData.但是,如果不是,你也.append()可以:
```
var inputLogo = $("#InputLogo")[0];
formData.append(inputLogo.name, inputLogo.files[0]);
```
并且,设置formData为data发送,告诉jQuery不要假设contentType它:
```
// ...
    data : formData,
    contentType : false,
    processData : false,
// ...
```
那么,它fileSize应该在PHP的$_FILES集合中可用:
```
$fileName = $_FILES['inputLogo']['name'];
```
2023-02-12 20:53 回答

zc163com
我知道这是一个老帖子,但是当我试图为自己解决一个类似的问题时我遇到了它,并且没有一个回复指出这个问题,所以我发布了一个回复以防其他人发现他/她自己情况.

事实证明,正如另一篇StackOverflow帖子所述:

如果输入标签没有名称,表单数据是否仍会传输？

如果您的文件输入元素没有非空名称属性,则不会在请求中发送该元素的数据.

所以你的输入元素:
```
<input type="file" id="InputLogo" accept="image/*">
```
应该:
```
<input type="file" id="InputLogo" accept="image/*" name="yourfieldnamehere">
```
或者文件不会与表单数据一起发送.
2023-02-12 20:54 回答

手机用户2602931635
我也通过以下方式尝试了很多:
```
var formData = new FormData("form")[0];
var formData = new FormData("form");
var formData = new FormData($('form-id'));
var formData = new FormData(this);
```
他们都没有为我工作.但最后,我使用了一种获取elementById的javascript方式,它运行得很好.
```
formdata = new FormData(document.getElementById('form_id'))
```
通常在请求标头中,您会找到一个加密文本,如下所示:multipart/form-data; 边界= ---- WebKitFormBoundaryUuVvGDydAdTf3Bmp

当您尝试提醒表单数据时,它将显示[object formdata].这意味着formdata函数工作正常.

当您返回$ _POST,$ _REQUEST或$ _FILES的值时,如果它为空,则表示formdata无法访问提供的表单元素.首先,您必须确认formdata是否能够访问表单元素,然后尝试其他可能性.
2023-02-12 20:54 回答

blue秋夜听雨321

撰写答案