Загрузка проблемы с XMLHttpRequest Уровень 2 - PullRequest
Новая
       38

Загрузка проблемы с XMLHttpRequest Уровень 2

2 голосов
/ 23 августа 2011

Я пытаюсь загрузить файл с помощью перетаскивания в HTML5. Бит перетаскивания работает без проблем - я могу получить изображение, которое перетаскиваю для немедленного отображения, сбросив base64 в тег img src. Тем не менее, мне нужно передать файл на сервер через POST. В том же запросе мне также нужно передать уникальный идентификатор. Вот как выглядит моя функция обработки: 

function processXHR (file)
{
    var xhr = new XMLHttpRequest(); 
    var fileUpload = xhr.upload;

    fileUpload.addEventListener("progress", uploadProgressXHR, false);

    fileUpload.addEventListener("error", uploadErrorXHR, false);

    xhr.open("POST", "changePicture");
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.setRequestHeader("Content-length", file.length);

    xhr.sendAsBinary(file.getAsBinary());
    xhr.setRequestHeader("Connection", "close");

}

Тем не менее, выполнение этого возвращает ошибку codeigniter: «Запрещенные ключевые символы». Кроме того, он не отправляет уникальный идентификатор, который мне нужен. Поэтому я изменил несколько строк: 

var params = "card_num="+selected+"&newPicture="+file.getAsBinary();
xhr.open("POST", "changePicture");
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("Content-length", params.length);
xhr.send(params);
xhr.setRequestHeader("Connection", "close");

Но это просто отправляет файл в виде строки. Что мне здесь делать?

1 Ответ

3 голосов
/ 25 августа 2011 
function processXHR(file) {
    var formData = new FormData();
    var xhr = new XMLHttpRequest();

    formData.append(file.name, file);

    xhr.open('POST', "/upload", true);
    xhr.onload = function(e) {
        console.log("loaded!")
    };

    xhr.send(formData);
    return false;
}

Очевидно, что это работает только в браузерах, которые поддерживают XMLHttpRequest Уровень 2

...