Блог

Я пытаюсь отправить файл с помощью XMLHttpRequest с помощью этого кода.

 var url= "http://localhost:80/....";
$(document).ready(function(){
    document.getElementById('upload').addEventListener('change', function(e) {
        var file = this.files[0];
        var xhr = new XMLHttpRequest();
        xhr.file = file; // not necessary if you create scopes like this
        xhr.addEventListener('progress', function(e) {
            var done = e.position || e.loaded, total = e.totalSize || e.total;
            console.log('xhr progress: '   (Math.floor(done/total*1000)/10)   '%');
        }, false);
        if ( xhr.upload ) {
            xhr.upload.onprogress = function(e) {
                var done = e.position || e.loaded, total = e.totalSize || e.total;
                console.log('xhr.upload progress: '   done   ' / '   total   ' = '   (Math.floor(done/total*1000)/10)   '%');
            };
        }
        xhr.onreadystatechange = function(e) {
            if ( 4 == this.readyState ) {
                console.log(['xhr upload complete', e]);
            }
        };
        xhr.open('post', url, true);
        xhr.setRequestHeader("Content-Type","multipart/form-data");
        xhr.send(file);
    }, false);
});
  

Я получаю эту ошибку: T

Запрос был отклонен, поскольку не была найдена составная граница.

Что я делаю не так?

1. Не существует такого понятия, как xhr.file = file; ; объект file не должен быть прикреплен таким образом.

2. xhr.send(file) не отправляет файл. Вы должны использовать FormData объект для преобразования файла в multipart/form-data объект post data:

    var formData = new FormData();
   formData.append("thefile", file);
   xhr.send(formData);
     

После этого к файлу можно получить доступ через $_FILES['thefile'] (если вы используете PHP).

Помните, что MDC и демо-версии взлома Mozilla — ваши лучшие друзья.

РЕДАКТИРОВАТЬ: Приведенный выше (2) неверен. Он отправляет файл, но он отправил бы его как необработанные данные post. Это означает, что вам придется самостоятельно анализировать его на сервере (а это часто невозможно, зависит от конфигурации сервера). Прочитайте, как получить необработанные данные post в PHP здесь.

Более расширенный ответ:

 let formData = new FormData();
formData.append("fileName", audioBlob);

$.ajax({
    "url": "https://myserver.com/upload",
    "method": "POST",
    "headers": {
        "API-Key": "myApiKey",
    },
    "async":        true,
    "crossDomain":  true,
    "processData":  false,
    "contentType":  false,
    "mimeType":     "multipart/form-data",
    "data":         formData
}).done(function(response){

    console.log(response);

});