Как свернуть загрузку c файлов с помощью XMLHttpRequest?

Question

PHP получил почтовый запрос на загрузку файла. print_r($_FILES); выводит следующее:

Array
(
    [resource] => Array
        (
            [name] => test.log
            [type] => application/octet-stream
            [tmp_name] => /tmp/php2O7WQy
            [error] => 0
            [size] => 6136
        )
)

Используя PHP, я выводил различные данные запроса на страницу в виде строк.

Я также добавил следующее JavaScript к страница:

var uri = document.getElementById("uri").textContent;
var body = document.getElementById("body").textContent;
var files = document.getElementById("files").textContent;
var headers = JSON.parse(document.getElementById("headers").textContent);
var contentType = document.getElementById("contentType").textContent;

var xhttp = new XMLHttpRequest();
xhttp.open(method, uri);
for (var name in headers) {
    for (var i = 0; i < headers[name].length; i++) {
        console.log(name, headers[name][i]);
        xhttp.setRequestHeader(name, headers[name][i]);
    }
}
if(contentType) xhttp.setRequestHeader("Content-Type", contentType);
var parsedFiles=JSON.parse(files);
if(typeof parsedFiles.resource !=='undefined') {
    console.log(JSON.stringify(parsedFiles)); //{"resource":{"name":"test.log","type":"application/octet-stream","tmp_name":"/tmp/php2O7WQy","error":0,"size":6136}}
    var formData = new FormData();
    formData.append('resource', parsedFiles.resource.tmp_name, parsedFiles.resource.name);
    xhttp.send(formData);
}
else {
    xhttp.send(body);
}
xhttp.onreadystatechange = function() {
    if (this.readyState == 4) {
        document.getElementById('output').innerHTML=xhttp.responseText;
    }
};

Однако, когда сервер получил XMLHttpRequest, $_FILES пуст.

Если я знаю файлы tmp_name, как я могу сгенерировать XMLHttpRequest, чтобы сервер использовал этот файл? В качестве альтернативы, следует ли мне сохранять файл как строку большого двоичного объекта на странице и отправлять ее?

Answer 1

Если вы просто хотите загрузить файл с помощью XHR, попробуйте следующий код.

var data = new FormData();
data.append("file", fileInput.files[0], "path/to/your/file");

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
  if(this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("POST", "url");
xhr.send(data);

Answer 2

В дополнение к ответу Сахила Пауделя, вот немного другой способ написания этого кода для использования более современных стандартов:

Давайте возьмем это в качестве примера формы:

<form>
    <input type='file'>
    <button type="submit">Submit</button>
</form>

По порядку чтобы отправить этот файл, вы можете использовать следующее:

document.querySelectorm(form button[type="submit"]).addEventListener('click', e => {

    e.preventDefault();

    let form, data, xhr;
    form = this.parentElement;
    data = new FormData(form);
    xhr = new XMLHttpRequest();

    xhr.open('POST', /*url*/);

    xhr.onload = function() {
        if(this.status === 200) {
            // do something with a positive response
        }
    }

    xhr.onerror = function() {
        // handle errors
    }

    xhr.send(data);

});

Это метод, который я использовал для загрузки файлов, он автоматически добавляет ваши файлы в ваш XMLHttpRequest и делает его доступным вам в $_FILES в PHP.