Загрузить файл с помощью Ajax XmlHttpRequest - PullRequest
Новая
       9

Загрузить файл с помощью Ajax XmlHttpRequest

54 голосов
/ 02 июня 2011

Привет, я пытаюсь отправить файл с xmlhttprequest с этим кодом. 

<script>
    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);
    });
</script>

но я получил эту ошибку: запрос был отклонен, так как не было найдено многочастной границы помогите мне пожалуйста ..

1 Ответ

92 голосов
/ 02 июня 2011
  1. Нет такой вещи как xhr.file = file;;объект файла не должен быть прикреплен таким образом.

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

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

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

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

EDIT : (2) выше было неверно.Он отправляет файл, но отправляет его как необработанные данные.Это означает, что вам придется анализировать его самостоятельно на сервере (и это часто невозможно, зависит от конфигурации сервера).Прочтите, как получить необработанные данные в PHP здесь .

...