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请求的标题看起来很正常

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

PS：这是我不能发送POST请求的要求。

Answer 1

您不能直接在File参数中发送send()，而需要使用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标头。这是由浏览器自动完成的。如果您自己做，则指定的边界将与实际发送的边界不匹配。

无法通过Ajax发送文件（print_r（$ _ FILES）; Array（））

1 个答案: