javascript - 无法通过 ajax 发送文件 ( print_r($_FILES); Array ( ) )

Question

我正在尝试发送文件，它适用于普通表单确认，但不适用于 XHR。
这是我的 HTML:

<form action="ajax/upload.php" method="post" name="form1" enctype="multipart/form-data" id="id1">
  <input type="file" name="input1">
  <input type="submit" name="submit1">
</form>  

<form action="ajax/upload.php"  method="post" name="form2" id="id2">
  <input type="file" name="input2">
  <input type="submit" name="submit2">
</form>

JS:

document.querySelector('#id2').onsubmit = function(e) {
    e.preventDefault();
    var file = document.querySelector('#id2 input[type="file"]').files[0];
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "ajax/upload.php", true);
    var boundary = String(Math.random()).slice(2);
    xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
    xhr.send(file);
}  

PHP:

echo '<pre>';
var_dump($_REQUEST);
echo 'print_r($_FILES); <br>';
echo 'Result: <br><br>';
print_r($_FILES);
print "</pre>";

我发送相同的文件，共同提交的响应:

array(1) {
  ["submit1"]=>
  string(31) "Отправить запрос"
}
print_r($_FILES); 
Result: 

Array
(
    [input1] => Array
        (
            [name] => CRC75.otf
            [type] => application/vnd.oasis.opendocument.formula-template
            [tmp_name] => /tmp/phpbNWcgk
            [error] => 0
            [size] => 411456
        )

)

对于 AJAX:

array(0) {
}
print_r($_FILES); 
Result: 

Array
( 
)

我不明白为什么，附加文件存在:

document.querySelector('#id2 input[type="file"]').files[0]
File { name: "CRC75.otf", lastModified: 1529516347000, webkitRelativePath: "", size: 411456, type: "application/vnd.oasis.opendocument.formula-template" }  

AJAX 请求的 header 看起来正常

Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: en-GB,en;q=0.5
Connection: keep-alive
Content-Length: 411456
Content-Type: multipart/form-data; boundary=44316423440108066
Host: localhost
Referer: http://localhost/
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linu…) Gecko/20100101 Firefox/61.0  

P.S.:要求我不能发送 POST 请求。

Answer 1

您不能直接在 send() 参数中发送 File，您需要使用 FormData 对象。

document.querySelector('#id2').onsubmit = function(e) {
    e.preventDefault();
    var formdata = new FormData;
    var file = document.querySelector('#id2 input[type="file"]').files[0];
    formdata.append("input2", file);
    formdata.append("submit2", "Отправить запрос");
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "ajax/upload.php", true);
    xhr.send(formdata);
}  

不要使用xhr.setRequestHeader()来设置Content-type header 。这是由浏览器自动完成的。如果您自己执行此操作，您指定的边界将与实际发送的内容不匹配。